Question

我有一个页面，我想将拖放事件绑定到。我希望浏览器中的整个页面成为放置目标，因此我将事件绑定到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);
});

Answer 1

在绑定新事件处理程序之前取消绑定现有事件处理程序。 namespaced events ^[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();
      },
      // ...
  });

Answer 2

对于只希望添加一次事件的用户，避免对每个新克隆的元素使用unbind()/off()和bind()/on()方法。

我在Code Project网站上发现了文章"Binding Events to Not Yet Added DOM Elements with JQuery (by Khrystyna Popadyuk)"，该文章显示了即使元素存在之前也仅注册一次事件的方法。 Read his full article for details.

$("body").on("click", ".your-style", function(event) {
       // your code ...
});

如果事件处理程序尚不存在，如何绑定它？

2 个答案: