js中事件重复绑定会相应导致多次处理程序的响应
项目中有一个选定车型的下拉组件，有品牌下拉和车系下拉，当我们选中某品牌后，才会弹出车系下拉。 测试中发现，当我们在选中某个品牌下拉后反悔，又重新选中了其他品牌，然后才选择车系，会出现问题响应程序多执行了一次。 经过反复调试找出原因： 当初设计这个功能时，约定当选中品牌后，触发车系下拉的弹出并与之绑定onChange事件，使得选中车系后请求相应数据。 问题关键在于，当jQuery为同一个元素绑定两次事件处理句柄，那么事件触发时，也同样会进行两次响应 也就是说当我们第一次选中品牌下拉时候，就触发了一次对车系下拉的事件绑定，而第二次选中品牌时候，又一次触发了车系下拉的事件绑定， 这样当我们最终选中车系下拉时，已经触发并对其进行了两次事件绑定，所以最终请求数据时也会请求两次。 ok，那我们如何避免之前那个bug呢。 我们可以在每次给车系下拉绑定事件处理句柄前，先清空之前可能存在的onChange事件绑定。代码如下： $('input.series').unbind('change').on("change", function(e){ ... }） 只需要简单的调用unbind方法并传入需要被终结的事件名就可以了。 延伸一下的话，jQuery中经常有这类处理， 在进行新的处理之前，终结掉此前的处理。 场景如有个下拉菜单，设计效果是鼠标移中则显示菜单，鼠标移除则隐藏菜单。