live事件的替代方法on的使用注意事项

根据jQuery的官方描述，live方法在1.7中已经不建议使用，在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。
　　on方法可以接受三个参数：事件名、触发选择器、事件函数。

需要特别注意的是：on方法中间的这个触发选择器就是你将要添加的HTML元素的类名、id或者元素名，使用它就可以实现live的效果。

例如我的html文档中已经有了一个id为parent的div，我将要在这个div内部再动态添加一个class为son的span，然后我为这个span绑定一个事件，那么我需要这样写：

$('#parent').on('click','.son',function(){alert('test')});

 

这个触发选择器实际上就是在 JQ内部判断了一次事件参数的$(e.target).is(selector)，只有触发对象匹配触发选择器才会触发。这是利用了事件冒泡的机制来完成 的，原本的live也是使用冒泡机制所以既然on可以实现那么live也就没有存在的必要了，只不过为了兼容让它从1.7苟延残喘的活到了1.9而已。

贴一个小项目的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>会员信息模块</title>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <style type="text/css">
        * {
            font-size: 12px;
        }

        tr {
            text-align: center;
            height: 40px;
        }
    </style>

</head>
<body>
<table width="800" border="0" cellspacing="0" cellpadding="0">
    <tr bgcolor="#EBE7DC">
        <td><input type="checkbox"/></td>
        <td>姓名</td>
        <td>性别</td>
        <td>卡号</td>
        <td>会员级别</td>
        <td>电话号码</td>
        <td>出生年月日</td>
        <td>消费金额</td>
        <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#FAF3E9">
        <td><input type="checkbox"/></td>
        <td>张三</td>
        <td>男</td>
        <td>6565654315321321</td>
        <td>短工</td>
        <td>18625455412</td>
        <td>1995-12-09</td>
        <td>10,000.00</td>
        <td><img class='add' src="images/add.jpg"/> <img class='del' src="images/del.jpg"/></td>
    </tr>
    <tr bgcolor="#FEFAF7">
        <td><input type="checkbox"/></td>
        <td>张三</td>
        <td>男</td>
        <td>6565654315321321</td>
        <td>短工</td>
        <td>18625455412</td>
        <td>1995-12-09</td>
        <td>10,000.00</td>
        <td><img class='add' src="images/add.jpg"/> <img class='del' src="images/del.jpg"/></td>
    </tr>
    <tr bgcolor="#FAF3E9">
        <td><input type="checkbox"/></td>
        <td>张三</td>
        <td>男</td>
        <td>6565654315321321</td>
        <td>短工</td>
        <td>18625455412</td>
        <td>1995-12-09</td>
        <td>10,000.00</td>
        <td><img class='add' src="images/add.jpg"/> <img class='del' src="images/del.jpg"/></td>
    </tr>
</table>
<a href="#" class='newone'>新增</a>
<script>
    //动态添加行用on,不能用动态的tr，要用原来存在的元素去取值
    $("table").on("click",".del",function () {
        $(this).parents("tr").remove();
    })
    $(".newone").click(function () {
            $("table").append('<tr bgcolor="#FAF3E9">'
                + '        <td><input  type="checkbox"/></td>'
                + '        <td>张三</td>'
                + '        <td>男</td>'
                + '        <td>6565654315321321</td>'
                + '        <td>短工</td>'
                + '        <td>18625455412</td>'
                + '        <td>1995-12-09</td>'
                + '        <td>10,000.00</td>'
                + '        <td>'
                + '            <img  class=\'add\' src="images/add.jpg" />'
                + '            <img class=\'del\' src="images/del.jpg" />'
                + '        </td>'
                + '      </tr>')
        }
    )
</script>
</body>
</html>

 



posted @ 2017-06-30 15:23  斯丢皮德曼  阅读(764)  评论(0)  编辑  收藏  举报