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后面生成后自动绑定对应的事件。
今天就记录这个小知识点。