仅当事件处理程序不存在时，如何才能绑定它？

Posted 2023-05-08

【中文标题】仅当事件处理程序不存在时，如何才能绑定它？

【英文标题】：How can you bind an event handler only if it doesn't already exist?

【发布时间】：2012-07-21 17:01:05

【问题描述】：

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

【问题讨论】：

jQuery check if event exists on element的可能重复

【参考方案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();
      ,
      // ...
  );

【讨论】：

我不得不使用bind() 和unbind() 而不是on() 和off()，但是这种方法效果很好。谢谢！

是的，如果您被旧版本的 jQuery 卡住（不过，将对象传递给 bind 应该也可以）。命名空间事件已在 jQuery 1.2 中引入，因此绝对可以工作 :) 编码愉快！

+1 upvote 这个答案对我有帮助，我发现它可以正常工作，谢谢。如果它对其他人有用，特别是我的情况，我正在制作一个移动切换菜单，所以我在一个 css 类的 jquery resize 事件监听器函数回调中应用了这个答案，$(window).resize(checkSizeFunctionCallback);（参考：fourfront.us/blog/jquery-window-width-and-media-queries）由于媒体查询断点而被添加。我的函数添加了一些标记，然后我使用上面的答案将点击事件绑定到该标记，但想确保它只添加一次。

【参考方案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 ...
);