Question

我正在动态地将节点（div）添加到DOM树，并通过jQuery（委托或不委托）附加事件侦听器。问题是我无法解除那些听众的束缚，结果他们堆积起来。这是一个示例代码，我找不到任何错误：

$(function() {
  var theTXT = '<div data-abc="tester">click here</div>';
  $("#loader").on('click', doClick);
  function doClick() {
    $("body").append(theTXT);
    $('[data-abc="tester"]').off('click', redoClick);
    $('[data-abc="tester"]').on('click', redoClick);
    function redoClick() {
      console.log("hi");
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">load</div>

现在，如果我在doClick（）处理程序之外移动redoClick（）处理程序，一切正常。任何帮助将不胜感激，因此我可以理解为什么.off（）不起作用。

Answer 1

问题不在于“关闭”，问题在于事件处理程序。

因为你在函数内部定义它，所以在函数调用结束后它将“超出范围”，因此off不能关闭这个特定的处理程序。

如果你把它放在功能之外它按计划工作，另一个选择是删除它：

$(function() {
  var theTXT = '<div data-abc="tester">click here</div>';
  $("#loader").on('click', doClick);
  function doClick() {
    $("body").append(theTXT);
    $('[data-abc="tester"]').off('click'); //remove the handler
    $('[data-abc="tester"]').on('click', redoClick);
    function redoClick() {
      console.log("hi");
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">load</div>

现在，如果我在doClick（）处理程序之外移动redoClick（）处理程序，一切正常。

因为它是在函数之外声明的，所以.off可以访问它。

但这是我的问题：怎么来的（）有效？我在这里缺少什么？

第一次点击你将有一个处理程序让我们说doClick＃1，首先“off”将尝试删除doClick＃1（没有绑定） - 然后on将点击，绑定doClick＃1。第二次运行你将创建doClick＃2，然后关闭将尝试删除doClick＃2 - 找不到，而on将添加doClick＃2（所以你将有＃1 +＃2等等）< / p>

Answer 2

好吧，假我，特定问题的答案（即如何不将事件监听器重新附加到一堆元素），这很简单。今天早上它袭击了我。而不是使用

$('[data-abc="tester"]').on('click', redoClick);

我应该使用：

$('[data-abc="tester"]').last().on('click', redoClick);

这样做了，不需要off（）

jQuery unbind事件处理程序不起作用

2 个答案: