脚本在ajax请求后不再工作

Scripts no longer work after ajax request

本文关键字：不再 工作 请求 ajax 脚本      更新时间：2023-09-26

页面上有一个表，我通过ajax更新它。有一些脚本使用表的内容。例如，其中一个使用表上的"Check all / Uncheck all"复选框来check/uncheck该表上的其他复选框。

当我执行ajax请求时，它返回的几乎与表的内容相同。至少，它是绝对正确的，不应该破坏脚本的功能。然而，在那之后，没有一个脚本不再工作。为什么?

例如，下面是*.js文件中的部分javascript代码:

$(document).ready(function() {
  $("#check-all").change(function(){
      $(".my_table input[type=checkbox]").prop('checked', this.checked);
    });
});

在执行ajax之前，请求一切工作正常。注意，ajax不返回任何javascript代码，所有javascript代码都位于外部js文件中。

因为您使用的是添加在文档上的事件处理程序。准备好了，之后添加的任何东西都不会有事件。

在jQuery 1.7之后，你可以使用on. 
$(document).on("change", "#check-all", function(){ ... });

另一种选择是保留现有的内容，只需在更新页面内容时调用代码。

function addChangeEvent() {
  $("#check-all").change(function(){
      $(".my_table input[type=checkbox]").prop('checked', this.checked);
    });
}
$(document).ready(function() {
    addChangeEvent();
});

和Ajax调用

$("#foo").load("xxx.html", function(){ addChangeEvent()l });

事件附加到旧页面内容。如果您替换了该内容，则事件将随之更改。

相反，尝试使用$("#check-all").on("change",function() {...});，我不是jQuery专家，但我相信，即使元素改变，也会坚持事件处理程序。

相关文章：