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();

}

这有点管用。该类似乎每隔两行就会“成功”切换一次。添加三行后，根据我在检查器中的判断或粘贴警报（）时，它在第三行成功触发，然后在单击时在第二行触发两次（看起来什么也没发生）。在第一排，它发射了三次，给人的印象是它工作得很好。

所以我多次调用 click 事件 - 可能是因为我附加了 3 次。但是如果我尝试在文档加载中使用它，则什么也不会发生。

我打算做的是修改 redraw() 函数以在重新附加之前删除单击事件。但感觉这样做的方式是错误的。

最好的方法是什么？

Answer 1

对于 jquery on，您实际上需要 2 个选择器：父选择器和子选择器。您可以使用on参数作为选择器附加到父级，以确定触发事件的后代。使用这个代替：$("#orderBox tbody").on( 'click', 'tr', function ( e ) {     selectRow($(this)); } )现有的tr和动态添加的现在将正确触发事件处理程序。