Javascript Jquery.on（）要么不工作，要么触发两次

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

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

在加载文档时，我将其称为：

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

其中selectRow（）切换tr元素上的类（下面的代码）

加载文档时，表为空，因此addTableRow（）函数会添加新行，该函数只会向tbody追加一个tr。一旦添加了tr，单击它什么也不做。因此，我将.on（）事件从document load移动到创建新行之后

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

函数重画OrderBox（）{
$（#orderBox tbody tr”）。打开（'单击'，函数（e）{
选择行（$（此））；
} )
}
函数selectRow（行）{
row.toggleClass（'selected'）；
}
函数addTableRow（项）{
newRow=“”；
newRow+=“”+项[0]+“”
newRow+=“”+项目[1]+“”
newRow+=“”+项目[2]+“”
newRow+=“”+项目[3]+“”
newRow+=“”+项目[4]+“”
newRow+=“”+项目[5]+“”
newRow+=“”+项目[6]+“”
newRow+=“”+项目[7]+“”；
$（“#orderBox tbody”）.append（newRow）；
重绘OrderBox（）；
}

这有点管用。“成功”类似乎每隔一行就打开一次。添加三行后，根据我在inspector中或在粘贴alert（）时所知，它在第三行成功触发，然后在第二行单击时触发两次（显示未发生任何事件）。在第一排，它发射了三次，这给人的印象是它工作得很好

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

我打算做的是修改redraw（）函数，在重新附加click事件之前去掉它。但我觉得这样做是不对的

最好的方法是什么？

对于jquery，实际上需要两个选择器，父选择器和子选择器。您可以将上的

附加到父级，并使用一个参数作为选择器来确定触发事件的代理

改用这个：

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

现有的
tr
s和那些动态添加的将正确地触发事件处理程序。
我认为您的函数在执行代码块时多次调用。您必须调试该代码块。它被附加了多次。我可以通过添加
$（“#orderBox tbody tr”）.off（'click'）但我只是认为.on（）附加到动态添加的项。但也许我只是弄错了。确切地说，你只需要再次检查代码，然后你会发现你已经多次使用相同的函数，通过删除它，你将能够解决这个问题。这是否回答了你的问题？