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

Question

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

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

$(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));
})

使用此绑定动态事件处理程序