jQuery中live()方法到on()方法的转变写法

jQuery中live()方法到on()方法的转变写法

一、live()方法

live(type, [data], fn)
    给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

原理：

        live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。

例：

<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>

<script>    
    $(function(){
        /*live()方法，在jQuery1.9中被移除*/
        $("div").live("click",function(){
            $(this).hide();
        });
    });
</script>

注：jQuery1.7中已不推荐使用live()方法，在jQuery1.9中移除了该方法，jQuery1.9+用on()方法替代。

二、on()方法

on(events,[selector],[data],fn)
    在选择元素上绑定一个或多个事件的事件处理函数。

参数说明：
        events：一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。
        selector：一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的是null或省略，当它到达选定的元素，事件总是触发。
        data：当一个事件被触发时要传递event.data给事件处理函数。
        fn：该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

jQuery1.9官方文档中的一些描述：

【Changes of Note in jQuery 1.9】
    The .live() method has been deprecated since jQuery 1.7 and has been 
instead. To exactly match $("a.foo").live("click", fn), for example, you 
can write $(document).on("click", "a.foo", fn). For more information, see 
the .on() documentation. In the meantime, the jQuery Migrate plugin can be
 used to restore the .live() functionality.

例：

<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>

<script>    
    $(function(){
        $(document).on("click","a",function(){
            $(this).hide();
        });
    });
</script>

简单说明：