javascript - 事件处理程序无法在文档加载后监视注入 HTML 的元素

Question

我正在用 Javascript 编写应用程序。没有过多的细节，我有一个带棋盘的游戏（实际上只是一个 HTML 表格）。用户通过单击 s 与板进行交互，因此我的 $(document).ready() 中有一个单击事件侦听器。事件处理程序通过更改几个变量/对象/等的状态来更新板，然后调用 layoutBoard，它读取所有这些对象的状态并填充 .

我遇到的问题是我的事件处理程序没有监视 new 中的 s，这意味着不再检测到单击事件。如何将事件处理程序定向到 new 或以其他方式继续检测板上的点击？这是我的代码：

$(document).ready(function(){
    layoutBoard();
    $("td").click(
        function() {
            movePiece($(this));
        }
    );
});

function movePiece(clickedCell){
    //do stuff
    layoutBoard();
}

function layoutBoard(){
    $("#board").empty();
    //recreate board and new <td>s
}

Answer 1

用于事件委托

$(document).on("click","td",function(){
     movePiece($(this));
});

最好委托给最近的静态父容器...

像

$('#tableID').on("click","td",function(){
     movePiece($(this));
});

Answer 2

$("body").on("click", "td", function() {
    movePiece($(this));
})

使用它来绑定您的动态事件处理程序