{"title": "jQuery\u4e8b\u4ef6\u91cd\u590d\u7ed1\u5b9a\u95ee\u9898", "update_time": "2014-07-06 14:17:56", "tags": "jquery", "pid": "305", "icon": "default.png"}
## jQuery事件绑定的一个陷阱 今天发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行。 下面是一个click事件被重复绑定的示例: ``` function reg_button_click(){ $("#button).click(function(){ alert("button click"); }); } $(document).ready(function(){ #重复注册3次 reg_button_click(); reg_button_click(); reg_button_click(); #触发的时候 出现3个alert $('#button').click(); }); ``` ## 解决办法 对于需要重复绑定的场景,再事件注册时候考虑用先unbind 再bind的方法;或者先off 再on ``` function reg_button_click(){ $("#button).unbind('click').bind('click',(function(){ alert("button click"); }); } $(document).ready(function(){ #重复注册3次 reg_button_click(); reg_button_click(); reg_button_click(); #触发的时候 出现3个alert $('#button').click(); }); ``` ## 参考 * https://ruby-china.org/topics/1313 * http://stackoverflow.com/questions/8408826/bind-event-only-once