Question

我动态创建一个充满'actors'链接的表，允许将actor信息拉入表单中以删除或更新该行。只有在选择演员时才会弹出删除按钮。

我可以点击一行，将信息拉入表单，然后在第一次尝试时将其删除。但是，当我尝试添加新的“Actor”然后删除它，或者只是删除现有的第2行时，“删除Actor”按钮不起作用。只有在第一次成功删除后，该按钮才会起作用。

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的变化，但我只是不知道要改变什么来使它工作。

Here is an Example正在行动

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");
});

};

这是unbind的链接。 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();
});

首次单击动态创建的表后，on.click无法正常工作

3 个答案: