jQuery --当发生ajax页面加载时，如何防止相同的事件处理程序被初始化？

Question

我用jQuery和PHP从废品中构建了一个表。它具有实时搜索、表列排序和分页(jQuery事件处理程序检查任何更改，然后用ajax重新加载表)。该表位于PHP中的div中，因此它将表加载到表的div)。当发生任何更改并触发ajax加载时，事件处理程序也会重新加载，因为PHP文件会发生变化，页面中有以前没有事件处理程序的元素。它的问题在于，对于同一个事件，这样会有太多的事件处理程序。

下面是一些来自jQuery代码的简单片段。

// for the first initialization
$('document').ready(function(){
    var tableSettings = setSettings(1, 2, 3); // returns a simple array
    loadTable(tableSettings);
});

// loads the table and the event handlers
function loadTable(tableSettings){
    $('#table_content').load('modules/donations_table.php', tableSettings, function(){
        search();
    });
}

// search() has event handlers like this
$('#location').change(function(){
    var tableSettingsNew = setSettings(1, 2, 4);
    loadTable(tableSettingsNew);  // this is where the problem occurs
});

如您所见，当更改发生在#位置时，它将更改tableSettingsNew数组，并将其与POST请求一起发送到donations_table.php，以从数据库生成新的表行。在#location进行4次更改之后，loadTable()函数将被调用15次。

我知道可以用donations_table.php中的内联脚本来解决这个问题，但是我正在寻找一个更优雅的解决方案。是否有任何方法重置我的事件处理程序，所以当页面加载时，它会破坏它们，然后在不重新加载整个页面的情况下重新构建它们？

Answer 1

在评论中，、serakfalcon、和cookie怪物都给了我正确的答案:事件委托。这里是一篇关于它的短文。

在我的示例中，解决方案是将$('#location').change(function() {...} )更改为$('#table_content').on('change', '#location', function(){})，因为ajax加载的元素位于#table_content中，因此该事件处理程序将检查其中发生的一切，因此不需要加载事件处理程序，而只需加载一次。

谢谢大家的评论。