js中click重复执行
问题背景:在写一个非常简单添加方法的时候,用onclick事件调用添加方法,点击第一次没问题,第二次会重复执行,经过多次查找资料得知这个状况的解决方案,特意总结一下;
代码如下:点击#spec_form出现重复点击
function addSpec() { var spec_form_format = jQuery("#spec_form_format"); spec_form_format.find(".noise-label01").text('实例'+addNum); spec_form_format.find(".noise-label02").text('名称'+addNum); spec_form_format.find(".noise-label03").text('价格'+addNum); jQuery("#spec_form").append(spec_form_format.html()); addNum++;
$("#spec_form").click(function(){
alert('111')
});
}
//添加 $(".add").click(function(){ addSpec() });
后来才发现问题是,我在页面中动态加载相同模块的时候,触发第二次添加加载的模块时,第一个模块的内容随之改变,这是因为第一个模块点击添加事件时并没有销毁而执行了两遍,所以只要改成如下:
只要选择在每次事件处理完成后销毁该事件,或者在下次事件触发前销毁之前的事件(每次绑定前先取消上次的绑定)
$("#spec_form").unbind('click').click(function(){ alert("111") });
还有另一种写法:
$("#spec_form").off("click").on("click",function(){ alert('111')});
但是.off()有一个不好之处,就是
会同时干掉所有相同类型的事件绑定,所以要谨慎使用
by name an