文檔加載后，事件處理程序無法監視注入HTML的元素

Question

我正在用Javascript編寫應用程序。 無需贅述，我有一個帶有棋盤的游戲（實際上只是一個HTML表）。 用戶通過單擊s與面板交互，因此我的$ {document）.ready（）中有一個click事件監聽器。 事件處理程序通過更改幾個變量/對象/等的狀態，然后調用layoutBoard來更新開發板，layoutBoard讀取所有這些對象的狀態並填充。

我遇到的問題是事件處理程序未監視新事件中的s，這意味着不再檢測到click事件。 如何將事件處理程序定向到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));
})

使用它來綁定您的動態事件處理程序