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

最新推荐文章于 2021-03-09 15:58:10 发布

最骚的就是你

最新推荐文章于 2021-03-09 15:58:10 发布

阅读量2.1k

点赞数

分类专栏： web前端学习文章标签： jquery 高性能 delegate on

本文链接：https://blog.csdn.net/libin_1/article/details/50756316

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

这里写图片描述

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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
深入理解jquery新的绑定事件机制on方法的使用

jQuery 推出on()的目的有2个，一是为了统一接口，二是为了提高性能，所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了，因为它已经处于不推荐使用列表了，随时会被干掉。如果只绑定一次事件，那接着用one()吧，这个没有变化。开始的时候写的代码如下，发现新生成的元素删除和添加点击都没反应，： $('.add a').on('cli
复制链接

扫一扫