深入理解jquery新的绑定事件机制on方法的使用

来源：互联网发布：淘宝运营助理招聘要求编辑：程序博客网时间：2024/06/05 20:14

这里写图片描述

jQuery 推出on()的目的有2个，一是为了统一接口，二是为了提高性能，所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了，因为它已经处于不推荐使用列表了，随时会被干掉。如果只绑定一次事件，那接着用one()吧，这个没有变化。

开始的时候写的代码如下，发现新生成的元素删除和添加点击都没反应，：

    $('.add a').on('click', function() {    $('tbody').append('<tr><td>1</td><td class="del">111</td><td class="del"><a href="#">删除</a></td><td class="add"><a href="#">添加</a></td></tr>')for (var i = 0; i < $('tbody>tr').length; i++) {$('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1);                    };                });

修改代码如下，发现有效果了：

$('tbody').on('click','.add a', function() {                    $('tbody').append('<tr><td>1</td><td class="del">111</td><td class="del"><a href="#">删除</a></td><td class="add"><a href="#">添加</a></td></tr>')                    for (var i = 0; i < $('tbody>tr').length; i++) {                        $('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1);                    };                });

最终代码：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>table 排序</title>        <script type="text/javascript" src="js/jquery-2.2.1.min.js"></script>        <style>            table {                border: 1px solid red;            }            th,            td {                padding: 10px;                text-align: center;            }        </style>        <script>            $(function() {                var hang = $('tbody>tr').length;                for (var i = 0; i < $('tbody>tr').length; i++) {                    $('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1);                };                $('tbody').on('click','.del a', function() {                    $(this).parent().parent().remove();                    for (var i = 0; i < $('tbody>tr').length; i++) {                        $('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1);                    };                });                $('tbody').on('click','.add a', function() {                    $('tbody').append('<tr><td>1</td><td class="del">111</td><td class="del"><a href="#">删除</a></td><td class="add"><a href="#">添加</a></td></tr>')                    for (var i = 0; i < $('tbody>tr').length; i++) {                        $('tbody>tr>td:first-child:eq(' + i + ')').text(i + 1);                    };                });            })        </script>    </head>    <body>        <table border="1" cellspacing="0" cellpadding="0">            <thead>                <tr>                    <th>num</th>                    <th>main</th>                    <th>del</th>                    <th>add</th>                </tr>            </thead>            <tbody>                <tr>                    <td>1</td>                    <td class="del">111</td>                    <td class="del"><a href="#">删除</a></td>                    <td class="add"><a href="#">添加</a></td>                </tr>                <tr>                    <td>1</td>                    <td class="del">222</td>                    <td class="del"><a href="#">删除</a></td>                    <td class="add"><a href="#">添加</a></td>                </tr>                <tr>                    <td>1</td>                    <td class="del">333</td>                    <td class="del"><a href="#">删除</a></td>                    <td class="add"><a href="#">添加</a></td>                </tr>            </tbody>        </table>    </body></html>

0 0