如何解绑通过jQuery.on绑定的动态DOM元素事件？

我非常理解你遇到的这个困扰——用事件委托绑定的点击事件，常规的unbind完全不管用，还因为重复绑定导致点击时代码多次执行，确实头疼！

首先得搞清楚事件委托的本质：你用jQuery('#cont').on('click', '.myElement1', handler)的时候，事件其实是绑定在#cont这个父元素上的，而不是.myElement1子元素。当点击子元素时，事件会冒泡到父元素，jQuery才会检查触发元素是否匹配.myElement1，然后执行对应的处理函数。这就是为什么你直接给.myElement1用unbind('click')完全无效——事件根本不在这些子元素身上！

正确的解绑方法 #

对应on的解绑方法是off，你需要在绑定事件的父元素上调用它，并且参数要和绑定的时候完全匹配：

• 解绑所有针对.myElement1的click委托事件：

  jQuery('#cont').off('click', '.myElement1');
  

• 如果你的处理函数是命名函数（不是匿名函数），更推荐加上函数名，这样只会解绑指定的那个处理函数，不会误删其他可能绑定在同一个父元素上的事件：

  // 示例命名处理函数
  function myClickHandler() {
    // 你的点击逻辑代码
  }
  
  // 绑定事件
  jQuery('#cont').on('click', '.myElement1', myClickHandler);
  
  // 解绑指定的处理函数
  jQuery('#cont').off('click', '.myElement1', myClickHandler);
  

解决事件多次执行的问题 #

之所以点击时代码多次执行，是因为你重复调用了on来绑定同一个委托事件，每调用一次就会给父元素多添加一个处理函数。这里给你两个实用的解决思路：

1. 在重新绑定之前，先执行上面的解绑操作，确保旧的事件被清除，再重新绑定新的；
2. 如果你的场景只需要事件执行一次，可以用one代替on，这样事件触发一次后就会自动解绑：

   jQuery('#cont').one('click', '.myElement1', myClickHandler);
   

内容的提问来源于stack exchange，提问作者asprin