25

我有一个想要绑定拖放事件的页面。我希望浏览器中的整个页面成为放置目标，所以我将我的事件绑定到document对象。不过，我的应用程序的内容是通过 AJAX 加载到主内容区域的，我只希望这些事件处理程序在上传页面当前可见时处于活动状态。

现在，我在检索上传页面时绑定事件处理程序；但是，每次上传页面变为活动状态时，它都会绑定一个新的事件处理程序，这会导致处理程序在用户转到上传页面、离开然后返回时多次触发。我想我可以解决这个问题，如果我可以让处理程序仅在它尚未绑定时绑定。这是可能的，还是我忽略了更好的选择？

相关代码，如果有帮助：

$(document).bind('dragenter', function(e) {
    e.stopPropagation();
    e.preventDefault();
}).bind('dragover', function(e) {
    e.stopPropagation();
    e.preventDefault();
}).bind('drop', function(e) {
    e.stopPropagation();
    e.preventDefault();
    self._handleFileSelections(e.originalEvent.dataTransfer.files);
});
4

2 回答 2

39

在绑定新事件处理程序之前取消绑定现有事件处理程序。这对于命名空间事件[docs]非常简单：

$(document)
  .off('.upload') // remove all events in namespace upload
  .on({
      'dragenter.upload': function(e) {
          e.stopPropagation();
          e.preventDefault();
      },
      'dragover.upload': function(e) {
          e.stopPropagation();
          e.preventDefault();
      },
      // ...
  });
于 2012-07-23T12:58:08.700 回答
2

对于那些只想添加一次事件的人，避免对每个新的克隆元素使用unbind()/off()andbind()/on()方法。

我在 Code Project 网站上找到了文章“使用 JQuery 将事件绑定到尚未添加的 DOM 元素（作者 Khrystyna Popadyuk）”，其中展示了如何只注册一次事件，甚至在元素存在之前。 阅读他的完整文章了解详情。

$("body").on("click", ".your-style", function(event) {
       // your code ...
});
于 2020-04-04T13:31:43.717 回答