求助：jQuery中addClass回调函数执行两次，append/alert均重复触发

为啥addClass的回调会执行两次？ #

这种情况我之前踩过坑！大概率是下面几个原因之一，你可以挨个排查：

• 事件/回调被重复绑定了
  比如你可能在代码里多次调用了绑定逻辑——比如页面加载时绑了一次，某个弹窗打开时又绑了一次，或者不小心把$(element).addClass('your-class', yourCallback)这段代码执行了两次。甚至按钮的点击事件本身被绑定了两次，每次点击都会触发两次addClass流程，自然回调也跑两次。你可以在绑定代码前后加个console.log('绑定了！')，看看是不是输出了两次。

• 选择器选中了多个DOM元素
  如果你用的是类选择器（比如$('.target-element')），而页面里刚好有两个匹配的元素，那addClass会给每个元素都添加类，每个元素都会触发一次回调，看起来就像回调执行了两次。你可以在回调里打印console.log(this)，看看是不是两个不同的DOM节点。

• 事件冒泡导致重复触发
  要是你的按钮（或者触发addClass的元素）的父元素也绑定了相同的点击事件，而且父元素的事件里也会调用这个addClass方法，那点击按钮时，事件会从按钮冒泡到父元素，两次触发addClass，回调也就执行两次了。可以试试在按钮的点击事件里加event.stopPropagation()，看看会不会只执行一次。

• 使用的addClass方法自带特殊触发逻辑
  如果你用的不是原生JS的classList.add，而是某些带动画效果的库（比如jQuery UI的addClass），有些实现会在动画开始和结束时各触发一次回调？或者你自己封装的addClass方法里不小心调用了两次回调函数？可以去看看你用的addClass的源码实现，或者简化代码测试——比如把回调里的append换成简单的console.log('执行了')，再排查是不是方法本身的问题。

排查小技巧：在回调函数里加console.log(new Date())或者console.log(event)，看看两次触发的时间、事件源是不是一样，能帮你快速定位是重复绑定还是多元素触发~

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