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

深入理解jquery新的绑定事件机制on方法的使用_第1张图片

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>

你可能感兴趣的:(jquery,on,delegate,高性能)