时间戳

首页 > 解决方案 > 如何正确删除点击处理程序？

jquery - 如何正确删除点击处理程序？

问题描述

我正在努力解决这个问题。

我有一个用于导航的 div 和一个加载页面的 div：

<div class="page"></div>

<div class="nav">
  <div class="page1">Page 1</div>
  <div class="page2">Page 2</div>
</div>

页面被加载 - 当用户点击特定的 div 时 - 通过 ajax load() 方法。“第 1 页”是主页，它基本上包含两个 div：

<div class="box"></div>
<div class="box"></div>

这就是我想要的：
=> 当我点击一个 .box div 时 - 这个 .box div 得到一个名为 .active 的类。
=> 当我再次单击此 .box div 时 - 应删除此 .box div 中的 .active 类。

它适用于以下 jQuery：

$(document).ready(function() {
  $(document).on("click", ".box", function() {
    $(this).toggleClass("active");
  });
});

但是...
当我切换到“第 2 页”并返回到上面显示的“第 1 页”并单击 .box div 时，“单击”会被触发两次 - 所以只需单击 .box div， .box div 获得一个 .active 类，并且 .active 类被移除。

我在这里做错了什么？

[编辑]
页面加载了 AJAX：

$('.page').load('page1.php');
$('.page1').click(function() {
  $('.page').load('page1.php');
});
$('.page2').click(function() {
  $('.page').load('page2.php');
});

标签： jquery

解决方案

虽然这将回答您的问题。但我强烈不推荐它，因为你宁愿修复 bug 的根源，这是一个关键的 JS 逻辑。

因此，“解决方法”是取消设置处理程序并将事件与命名空间绑定。

$(document).off("click.box").on("click.box", ".box", function() {
  $(this).toggleClass("active");
});

当使用 ajax 加载内容时，您应该始终使用一个元素作为 ajax 内容的根，例如$('.myAjaxRoot').on('click')

强烈建议不要总是依赖 JS，$(document)尤其是在多次通过 AJAX 加载 JS 时。

$(function() {
    //put all this stuffs inside page1.php so when the DOM is cleared from AJAX, so does the events
    $(".content").on("click", ".box", function() {...});
});

推荐阅读