Jquery 如何正确删除单击处理程序？

我正在为这个问题苦苦挣扎

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

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

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

但是…
当我切换到“第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');
}); 

---

而这将解决你的问题。但我强烈不推荐它，因为您更愿意修复bug的根源，这是一个关键的JS逻辑

因此，“解决方法”是取消处理程序的设置，并用名称空间绑定事件

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

使用ajax加载内容时，应始终使用元素作为ajax内容的根，如

$（'.myAjaxRoot'）。在（'click'）

强烈建议不要总是依赖

$（文档）

，尤其是在多次通过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() {...});
});

---

你到底什么时候调用javascript逻辑？仅仅是简单的代码并没有错。脏虫子在别处。您必须试着调试为什么要将事件绑定到两次这里“切换到第2页”的确切方式是什么？您的“页面”看起来只是

元素，而不是指向其他页面的实际链接。我怀疑可能需要一个更完整的例子来说明这个问题。这里的要点是，该逻辑只应执行一次，因为您正在文档上创建委托事件绑定。不需要多次执行它，事实上，这样做会创建重复的绑定。@David请查看我的编辑。你是说

$（“.page”）。在（“单击“，”.box”，function（）{…}）上？我假设您将JS放在“page1.php”中。因此，不，您应该绑定到“page1.php”内容中的根元素不，JS位于包含导航（.nav）和页面容器（.page）的“container.php”的底部。“page1.php”上基本上只有一个包含一些文本的.content div。但是当我写
$（“.content”）.on（“单击“，”.box”，function（）{…}）
在“container.php”中，没有触发单击jQuery。我应该在
$（document.ready（function（）{…}）中编写所有这些代码吗？我很确定你多次调用过JS。只需在
$（文档）前面放一个“警报”。点击（'click'）
，查看它触发了多少次。并使用上述方法关闭（单击）
。使用
$（function（）{…}）
将JS包装为document.ready它可以绑定到“page1.php”=>
$（“.content”）中的根元素。但我不明白-为什么？请你再解释一下好吗？因为在“page1.php”的.content div中没有.box div。
$(document).off("click.box").on("click.box", ".box", function() {
  $(this).toggleClass("active");
});

$(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() {...});
});