Jquery.on() 不工作或触发两次

Question

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

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

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

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

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

加载文档时，表格为空，因此 addTableRow() function 添加了新行，它只是将 tr 附加到 tbody。 添加该 tr 后，单击它不会执行任何操作。 因此，我将 the.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();
}

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

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

我打算做的是修改 redraw() function 以在重新附加之前去除点击事件。 不过感觉好像走错路了 go 一下吧。

最好的方法是什么？

Answer 1

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

改用这个：

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

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