如何防止在ajax页面加载时初始化相同的事件处理程序

jQuery - How to prevent the same event handlers to get initialized when an ajax page load occurs?

本文关键字：初始化 程序 事件处理 加载 何防止 ajax      更新时间：2023-09-26

我用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
});

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

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

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

在我的例子中，解决方案是改变$('#location').change(function() {...} )到$('#table_content').on('change', '#location', function(){})，因为ajax加载的元素是在#table_content，所以这个事件处理程序将检查里面发生的一切，所以我不需要加载我的事件处理程序，但一次。

谢谢大家的评论。

相关文章：