什麼是JavaScript事件委託，以及如何讓我的js DRY？

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

你在做什麼被刪除元素，再次創造它（不知道爲什麼）。所以它不再是相同的元素，你的事件處理程序將無法工作。

在這種情況下，是的，你應該使用事件委派：

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

編輯：

您可以使用.appendTo（）將其添加到另一個地方（也許隱藏的股利或東西）。或者您可以將它附加到（）它的目的地，但隱藏它，直到你ajax回調觸發。我創建了一個小的jsfiddle告訴你，appendTo（）不刪除事件處理程序：jsfiddle

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

希望這有助於你。