Question

我对jQuery很新，并且无法访问动态内容的元素。正如您在下面看到的，我创建了一个包含在div中的基本表，该表在运行代码时已经存在。单击任何单元格时，警报提示将显示该单元格的文本。但是，如果我在页面加载（单击按钮）之后创建表格然后单击单元格，我就无法获得相同的结果。

<script>
    $(document).ready(function() {
        $("#div1 td").click(function() {
            alert($(this).text());
        })

        $("#div2 td").click(function() {
            alert($(this).text());
        })

        $("#createtable").click(function () {
            $("#div2").html("<table id=\"table2\" border=\"1\"><tr><th>Table</th><th>2</th></tr><tr><td>January</td><td>$100</td></tr></table>");           
        })

    });
</script>

<div id="div1">
    <table id="table1" border="1">
      <tr>
        <th>Table</th>
        <th>1</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
    </table>
</div>

<br>
<button id="createtable">Generate Table</button>
<div id="div2">DYNAMIC CONTENT</div>

Answer 1

事件处理程序在文档加载时注册。您应该在替换上下文后重新注册它们，这样您最好将代码放在单独的函数中，并在替换受影响元素的每个位置调用它

function regHandlers()
{
        $("#div1 td").click(function() {
            alert($(this).text());
        })

        $("#div2 td").click(function() {
            alert($(this).text());
        })
}

$(document).ready(function() {

        regHandlers();

        $("#createtable").click(function () {
            $("#div2").html("<table id=\"table2\" border=\"1\"><tr><th>Table</th><th>2</th></tr><tr><td>January</td><td>$100</td></tr></table>");  

        regHandlers();
        })
});

Answer 2

您需要为动态添加到DOM的元素应用事件委派：

$(document).on("click","#div2 td", function() {
    alert($(this).text());
});

jquery访问动态内容的元素

2 个答案: