ajax加载后jQuery故障

Question

我现在有一个问题，我正在使用slidetoggle隐藏/显示主导航：

$("#menu_block_button").click(function(){
    $("nav #block-menu-block-2 > div > div > ul").slideToggle();
})

直到我在页面上加载ajax之前，它都可以正常工作。 在此之后，它将执行两次切换。 我认为该脚本将在ajax之后再次加载。

我该怎么做才能在触发事件之前将其删除？

Answer 1

如果那是该特定元素的唯一侦听器，并且是AJAX就是问题所在，那么在AJAX请求的成功功能结尾处，添加以下代码：

$("#menu_block_button").off();    
$("#menu_block_button").click(function(){
  $("nav #block-menu-block-2 > div > div > ul").slideToggle();
})

这将删除所有附加到该元素的事件侦听器，并添加您想要返回的事件侦听器。 但是，如果仍然发生两次，那么您必须已经在其中添加了添加事件侦听器的代码，因此只需在成功函数中添加以下代码即可：

$("#menu_block_button").off();    

Answer 2

绑定和取消绑定处理程序可能会带来麻烦。 最好使用委托事件。

事件是从DOM树中的元素自下而上发送的。 委托事件处理程序附加到将触发已处理事件的元素的容器。 当事件被触发时，它不会在元素本身中处理，而是会冒泡直到到达必须处理它的容器。 因此，容器负责处理事件。 （容器“知道”哪个元素触发了事件，因此它可以根据选择器决定是否处理该事件）。

如果选择不被AJAX更新替代的容器，则不必担心在ajax更新之后绑定和取消绑定处理程序。

你怎么做呢？ 它取决于jQuery版本。

它曾经是.live()或最好是.delegate()

.live（） ：为现在和将来与当前选择器匹配的所有元素附加事件处理程序。 （在1.7中弃用，在1.9中删除）

.delegate（） ：根据一组特定的根元素，将处理程序附加到一个或多个与选择器现在或将来匹配的所有元素的事件。

现在，推荐的方法是on() ：

.on（） ：将一个或多个事件的事件处理函数附加到所选元素。

为了使用on() ，您必须这样做：

$('container selector').on('event','triggers selector', 'handler')

例如，要使用clicked的函数来处理id为navbar的div中的所有链接（ a元素）：

$('div#navbar').on('click', 'a', clicked);

您只能拨打一次电话，并且只要AJAX更新中没有更新navbar div，它将保持正常工作。 （如果此div已更新，请选择一个不是的外部元素！您始终可以选择主体，但是最好将其尽可能地靠近触发器来处理）

注意：如果您在任何时候使用event.stopPropagation() ，事件将停止冒泡DOM树。 如果您不调用它，并且同一事件有任何其他委托事件，则将再次处理该事件。

注意：这对于处理可由许多不同元素触发的事件也很有趣。 例如，如果您有一个表，其中包含许多行，每个表中都有几个链接，并且要处理对该链接的单击，那么将单个处理程序绑定到表上比将触发器绑定到所有表上更好。元素。

Answer 3

绑定和取消绑定此元素是一个创可贴。 IMO，您应该审核您的代码并对其进行重构，以使其不会两次执行。 否则，您可能会产生许多其他不利影响。 如果您发布代码，我大概可以说出问题出在哪里。