jquery 的on绑定误解

标签：

jquery的on绑定事件到元素是很方便的事情，但是有一个很多人都不注意的是，如果on绑定相同的事件2次，就会引发很奇怪的事件。看下面的代码：

 1 <div class="JQ_show_list" style="display: none">
 2 
 3 </div>
 4 <script type="text/javascript">
 5     function show_list(){
 6         $(".JQ_show_list").on(‘click‘,function(){
 7             console.log($(this));
 8             $(this).toggle();
 9         })
10     }
11 
12     show_list();
13     show_list();
14 
15 </script>

然后不管你怎么点，这个div就是不显示。当你去看console控制台，你会发现，输出2个这个$(this)对象，这个是为什么？因为我们执行了2次on绑定，jquery的不区分on绑定的是否是同一个函数，所以先触发第一次绑定，div应该显示，但是有触发第二次绑定，所以div变成不显示了。这就是on的坑，但是on有一个好处，就是元素可以是后面动态生成的，也可以相应的拥有绑定的事件，这个可以很方便写插件的时候因为一些dom后面生成后自动绑定对应的事件。

今天就记录这个小知识点。

jquery 的on绑定误解

标签：

原文地址：http://www.cnblogs.com/xiaoyuqin/p/5197305.html