关于on()绑定和click()事件的区别 jquery基础学习

说起本文，我是因为项目中的一个问题导致的。然后我查了各种资料总结了一下。

先上代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="tablestyle.css" rel="stylesheet" />
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function () {
            //不能捕捉到事件，因为js是从上到下加载，所以后面动态生成的chenckbox此时还没有生成。
            $("table input[type='checkbox']").click(function () {
                alert("1213");
            })
            //可以捕捉到事件
            $("table").on("click", "input[type='checkbox']", function () {
                alert("我是on方法");
            })
            //动态生成表格，我已经习惯用表格做案例了。
            Createtable();
            function Createtable() {
                for (var i = 0; i < 10; i++) {
                    var jcclass = "trmian" + i;
                    var childclass = "." + jcclass;
                    $("#maintable").append("<tr class=" + jcclass + "></tr>")
                    for (var k = 0; k < 3; k++) {
                        if (k == 0) {
                            $(childclass).append("<td>" + i + "</td>");
                        } else if (k == 1) {
                            $(childclass).append("<td><input type='checkbox'  value='男'/></td>");
                        } else if (k == 2) {
                            $(childclass).append("<td><input type='checkbox'  value='女'/></td>");
                        }
                    }
                }
            }
        })
    </script>
</head>

<body>
    <table id="maintable">
        <tr>
            <td>序号</td>
            <td>男</td>
            <td>女</td>
        </tr>
    </table>
</body>
</html>

有人会说，既然 $("table input[type='checkbox']").click(function () {alert("1213"); })

不能捕捉到事件，因为js是从上到下加载，所以后面动态生成的chenckbox此时还没有生成。那么直接把他放在表格加载之后就可以了啊？确实，如果你非要这么做，那确实可以，我也测试过了。但是在实际开发中，前台的数据往往是从后台请求过来的，此时是多线程。楼主试验过，在这种（如ajax）的情况下，及时把上面的方法写在动态加载后面，也是依然没有作用的。！所以我们要用$("table").on("input[type='checkbox']","click",function(){""})。只有通过on绑定click事件的方式才能达到效果。

总结：click()和不带子元素的on()的作用是一样的，只会对当前存在的dom元素起作用。

带子元素的on()绑定是可以动态绑定事件，只要父元素在绑定时已经存在。本质是将子元素绑定到父元素上，也就是事件委托。

关于on()绑定和click()事件的区别 jquery基础学习

猜你喜欢