Question

我正在动态构建一个表tr。每行都有一个表格单元格td，每个单元格都有一个按钮：

var openButton = $('<button class="BtnOpenOrder">Open</button>');
openButton.button({ icons: { primary: "ui-icon-arrow-1-e" } });
openButton.attr('id', 'btnOpenSession' + i);
openButton.attr('onclick', 'openExistingSession("' + key + '")');
td8.append(openButton); // append to cell

在我的程序中，我可能需要删除所有表行并创建新行。

$("#sessionMenu").find("tr:gt(0)").remove();

但它删除行的接缝，不会删除事件。因此，在创建新行时，会创建相同的事件。当事件被触发时，它会多次触发。例如，如果行被删除并重新创建5次，则在触发事件时，其触发器将触发5次。根据我的阅读，我需要删除该事件。

 $(".BtnEditOrder").add("*").off();

但这种接缝会导致我的整个页面在调用时刷新。什么是最好的删除表格行及其所有事件？

修改

以下是一个工作示例：jsfiddle

Answer 1

有它！

$(document).on('click', '#btnOpenSession' + i, function(e) {

你做一个委托绑定家伙。不要这样做，或者只做一次。这是将一个事件处理程序附加到文档，该文档侦听冒泡的单击事件并检查它们的id是否匹配。如果是，它会对它们处理处理程序。多次这样做会使它多次发射。

只执行一次，或更改它以将处理程序直接附加到元素。

修改

另外为了将来的参考，如果您要使用这样的委托绑定，那么良好的做法是尽可能低地绑定。虽然逻辑只会在匹配元素上实际执行，但该过程仍然会评估每个事件，以确定它是否应该处理。同时，在这种情况下，你真的只关心来自你桌子的事件。所以最好绑在桌子上。

删除元素及其子事件

1 个答案: