jquery 的on绑定误解

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

<div class="JQ_show_list" style="display: none">

</div>
<script type="text/javascript">
    function show_list(){
        $(".JQ_show_list").on('click',function(){
            console.log($(this));
            $(this).toggle();
        })
    }

    show_list();
    show_list();

</script>

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

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