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

Question

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

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

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

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

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

加载文档时，表为空，因此 addTableRow() 函数会添加新行，该函数只是将 tr 附加到正文。添加该 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

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

请改用这个：

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

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