javascript - 什么是 javascript 事件委托(delegate)以及如何让我的 js 保持干燥？

Question

我的案例

$(".myElementWithSpecialActionHandler").click(function(){});

元素被重新定位后，比如插入到页面的不同位置，

var content_from_table = from_table_obj.html(); 
var content_target_table = to_table_obj.html();

在 ajax 调用之前。我把

from_table_obj.html(content_target_table); 
to_table_obj.html(content_from_table);" in the ajax response handler.

之后事件处理函数停止工作。所以我必须做

// after DOM manipulation
// again >.<
$(".myElementWithSpecialActionHandler").click(function(){});

是event delegation只有这样才能解决？还是有更好的方法从一开始就避免这种情况？

编辑:添加“重新定位”代码

Answer 1

你正在做的是删除元素并重新创建它(不知道为什么)。因此它不再是同一个元素，您的事件处理程序将无法工作。

在这种情况下，是的，您应该使用事件委托(delegate):

$(document).on('click', ".myElementWithSpecialActionHandler", function(){});

编辑:

您可以使用 .appendTo() 将它添加到另一个地方(可能是隐藏的 div 或其他东西)。或者你可以将它 appendTo() 到它的目的地但隐藏它直到你触发 ajax 回调。我创建了一个小 jsfiddle 来向您展示 appendTo() 不会删除事件处理程序:jsfiddle

var divId = '#div2';
$('button').on('click', function() {
   $(this).appendTo(divId);
    divId = divId == '#div2' ? '#div1' : '#div2';
});

希望对你有帮助。