第一次單擊動態創建的表后，on.click 不起作用

Question

我動態創建了一個充滿“演員”鏈接的表格，它允許將演員信息拉入表單以刪除或更新行。 刪除按鈕僅在您選擇演員時彈出。

我可以單擊一行，將信息拉入表單，並在第一次嘗試時將其刪除。 但是，當我嘗試添加一個新的“演員”然后將其刪除，或者只是刪除現有的第二行時，“刪除演員”按鈕不起作用。 只有在第一次成功刪除后，按鈕才不再起作用。

var addActor = function() {
    // Creates a table of links for each added actor  with an id based from # of actors
    $("#actorsTable").append("<tr><td><a href='' onclick='deleteActor(this)' class='update' data-idx='" + actors.length + "'>" + newActor.fName + " " + newActor.lName + "</a></td></tr> ");

    $(".update").off("click");
    $(".update").on("click", selectActor);
};


var deleteActor = function(e) {
    $("#deleteActor").on('click', function(event) {
        event.preventDefault();
        var row = e.parentNode.parentNode;
        row.parentNode.removeChild(row);
        clearForm(actorForm);
        actorState("new");
    });
};

我是 jQuery/javascript 的新手，我很確定這是由於 DOM 的變化，但我只是不知道要改變什么才能使它工作。

這是它在行動中的一個例子

Answer 1

嘗試

var deleteActor = function(e) {

$("#deleteActor").unbind();
$("#deleteActor").on('click', function(event) {
    event.preventDefault();
    var row = e.parentNode.parentNode;
    row.parentNode.removeChild(row);
    clearForm(actorForm);
    actorState("new");
});

};

這是解綁的鏈接。 http://api.jquery.com/unbind/

Answer 2

問題是因為您正在從onclick屬性運行的單擊處理程序函數中添加另一個單擊處理程序（在 jQuery 中）。 您應該使用一種方法，而不是同時使用兩種方法。 要以最簡單的方式解決問題，只需從deleteActor()函數中刪除 jQuery 代碼：

var deleteActor = function(e) {
    var row = e.parentNode.parentNode;
    row.parentNode.removeChild(row);
    clearForm(actorForm);
    actorState("new");
};

Answer 3

當您動態添加 html 時，您需要將事件附加到父靜態元素，如下所示：

$("#actorsTable").on("click","a.update", function() {
  $(this).closest("tr").remove();
});