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和动态添加的现在将正确触发事件处理程序。