javascript - Jquery .on() 要么不工作要么触发两次

Question

所以不确定到底发生了什么，但可以做出一些猜测。

我对 .on() 的理解是它意味着附加到所有动态添加的元素。但它似乎并没有在这里工作。或者，如果我误解了这一点，那么我实现的方式就不起作用了。

在文档加载时，我称之为:

$("#orderBox tbody tr").on( 'click', function ( e ) {
    selectRow($(this));
} )

其中 selectRow() 在 tr 元素上切换类(下面的代码)。

加载文档时，表格是空的，因此 addTableRow() 函数添加了新行，该函数只是将 tr 附加到 tbody。添加该 tr 后，单击它不会执行任何操作。因此，我将 .on() 事件从文档加载移到了新行创建之后。

function redrawOrderBox(){
    $("#orderBox tbody tr").on( 'click', function ( e ) {
        selectRow($(this));
    } )
}

function selectRow(row){
    row.toggleClass('selected');
}

function addTableRow(items){

    newRow = "<tr>";
    newRow += "<td class=\"hide\">"+items[0]+"</td>"
    newRow += "<td>"+items[1]+"</td>"
    newRow += "<td>"+items[2]+"</td>"
    newRow += "<td>"+items[3]+"</td>"
    newRow += "<td>"+items[4]+"</td>"
    newRow += "<td class=\"hide\">"+items[5]+"</td>"
    newRow += "<td class=\"hide\">"+items[6]+"</td>"
    newRow += "<td class=\"hide\">"+items[7]+"</td></tr>";
        
    $('#orderBox tbody').append(newRow);
    redrawOrderBox();
}

这有点管用。 “成功”类似乎每隔两行切换一次。添加三行后，根据我在检查器中或在 alert() 中的判断，它在第三行成功触发，然后在单击时在第二行触发两次(看起来什么也没发生)。在第一行，它连发了三下，给人的感觉是工作正常。

所以我多次调用点击事件 - 可能是因为我附加了它 3 次。但是如果我尝试在文档加载中使用它，则没有任何反应。

我打算做的是修改 redraw() 函数以在重新附加之前去除点击事件。但它只是感觉做事的方式不对。

执行此操作的最佳方法是什么？

Answer 1

对于 jquery on ，您实际上需要 2 个选择器，父级和子级。您使用参数作为选择器将 on 附加到父级以确定触发事件的后代。

改用这个:

$("#orderBox tbody").on( 'click', 'tr', function ( e ) {
    selectRow($(this));
} )

现有的 tr 和那些动态添加的现在将正确触发事件处理程序。