javascript - 为动态创建的 DOM 对象多次触发事件

Question

该程序有两个 javascript 函数，用于生成表格 (generateTable) 和删除一个选定的行 (deleteOneRow)。

generateTable 函数根据服务器数据生成一个表。每行采用以下格式:

<tr><td><span class="desc">aaa</span><a href="#delete_choice" class="delete-choice">Delete</a></td> </tr>

基本上，每一行都是一些文本，后面跟着一个“删除”链接。 当脚本完成表格生成时，它调用 $(".delete-choice").click(deleteOneRow) 将点击绑定(bind)到事件处理程序。

在事件处理函数deleteOneRow 中，它首先简单地删除表中的所有行。然后再次调用 generateTable 以显示剩余的数据条目。代码结构如下:

function deleteOneRow() {
    var choiceIdx = ... //get index
    $(".delete-choice").unbind('click');
    CurrentChoices.splice(choiceIdx, 1); // remove the entry from the array
    $("#problem-choice-table  tr").each(function(){ // delete the DOM entries
        $(this).remove();
    })
    generateTable();    
}

如果表格有两行，点击第一行的删除链接后，第一行被删除。然后它生成一个表，其中第 2 行移动到第 1 行。然而，deleteOneRow 再次被调用，然后第二行最终被删除。

我猜这是因为事件被触发了多次。我尝试了解除绑定(bind)、stopPropagation 等。没有任何效果。

Answer 1

使用 jquery 的 live附加事件非常适合动态添加/删除内容并且您想匹配同一个选择器的情况，您是否考虑过使用它？