如何清除元素内全部含JavaScript的内容？Ajax重复请求事件重复执行问题

问题根源 #

每次Ajax请求加载page.php时，里面的JavaScript代码会重新执行一遍。如果你在page.php里直接用.on("click")绑定元素事件，第一次加载会绑定一次，第二次加载又会给新元素（或残留的事件逻辑）再绑一次，自然点击就会触发多次。$("#contentHolder").empty()只能清空DOM元素，但之前执行过的事件绑定逻辑已经存在于内存中，或者新加载的JS又重复执行了绑定操作。

实用解决方案 #

方案1：用事件委托（推荐）

把事件绑定在不会被替换的父元素上（比如你的#contentHolder），只需要在主页面绑定一次，之后不管怎么Ajax加载内容，新元素都会自动触发事件，不会重复绑定。

举个例子，把原来写在page.php里的点击事件代码，移到主页面（只执行一次）：

// 主页面的JS，只运行一次
$("#contentHolder").on("click", ".your-click-element", function() {
  // 这里写你的点击逻辑
});

之后page.php里只需要放HTML结构，不用再写绑定点击事件的JS，这样不管加载多少次，事件只会触发一次。

方案2：绑定前先解绑事件

如果必须在page.php里写绑定事件的JS，那每次绑定前先解绑相同的事件，避免重复绑定：

// page.php里的JS代码
$(".your-click-element").off("click").on("click", function() {
  // 点击逻辑
});

如果担心影响其他同名事件，可以给事件加命名空间，精准解绑：

// page.php里的JS代码
$(".your-click-element").off("click.ajaxPage").on("click.ajaxPage", function() {
  // 点击逻辑
});

方案3：抽离公共JS代码

把重复执行的JS逻辑（比如点击事件）从page.php里抽出来，放在主页面只加载一次，page.php只提供HTML结构，从根源避免重复执行JS绑定代码。

对你现有代码的修改建议 #

如果用方案1，主页面只保留事件委托代码，page.php去掉绑定事件的JS；如果用方案2，修改page.php里的绑定逻辑为先解绑再绑定。

内容的提问来源于stack exchange，提问作者James