Question

我使用废弃的jQuery和PHP构建了一个表。它有实时搜索，表列排序和分页（jQuery事件处理程序检查任何更改，然后他们用ajax重新加载表。该表位于PHP中的div中，因此它将表加载到表中＆＃39 ; s 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中的内联脚本解决此问题，但我正在寻找更优雅的解决方案。有没有办法重置我的事件处理程序，所以当页面加载它会破坏然后重建它们而不重新加载整个页面？

Answer 1

在评论中， serakfalcon 和 cookie monster 都给了我正确答案：事件委托。 Here是一篇关于它的简短文章。

在我的示例中，解决方案是将$('#location').change(function() {...} )更改为$('#table_content').on('change', '#location', function(){})，因为加载了ajax的元素位于#table_content中，因此此事件处理程序将检查其中发生的所有内容，因此我不会＃39 ; t需要加载我的事件处理程序，但有一次。

感谢大家的评论。

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

1 个答案: