Jquery中on绑定的一些小坑

2018-09-18 06:37:57来源：博客园阅读 ()

---恢复内容开始---

今天我们来说说关于JQuery中事件绑定中on绑定的一些小问题，直接上代码了，大家拷下去就可以用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        li {
            list-style: none
        }

        .ul_one,
        .ul_two {
            overflow: hidden;
            float: left;
            margin-left: 400px;
            margin-top: 200px;
        }

        .ul_one>li,
        .ul_two>li {
            text-align: center;
            height: 40px;
            width: 120px;
            background-color: yellow;
            border: 1px solid gray;
            line-height: 40px;
        }

        .ul_two>li {
            background-color: green;
        }
        p{color: green;font-size: 20px;clear:both;margin-left: 300px;margin-top: 20px}
    </style>
</head>

<body>
    <ul class="ul_one">
        <li>a1</li>
        <li>a2</li>
        <li>a3</li>
        <li>a4</li>
    </ul>

    <ul class="ul_two">
        <li>b1</li>
        <li>b2</li>
        <li>b3</li>
        <li>b4</li>
    </ul>
    <p>当我们在on函数的参数里面传入了子元素的参数  on的绑定机制类似于事件绑定，所以我们才不能移除某个子元素的事件</p>
    <p>而当我们不传入子元素的参数，on的绑定机制相当于循环绑定，所以此时我们可以移除某个子元素的事件</p>
    <p>注意：需要引入JQuery,打开控制台看输出，打开源码看注释</p>
</body>

</html>
<script src="jquery-1.11.3.js"></script>
<script>
    //JQuery中on绑定的一些小坑
    // 然后用on来对两个ul进行绑定

    // 这种方法将第二个参数填入   即将子元素参数填入
    $(".ul_one").on("click", "li", function () {
        console.log(this)
        //可以看到事件已经绑定上
    })
    //现在尝试给第一个子元素移除事件
    $(".ul_one").children().eq(0).off("click");
    //    你会发现根本移除不掉

    // 可以对未来元素实现绑定
    var newli1 =  $("<li>a未来元素</li>");
    $(".ul_one").append(newli1)




    //    由于on的第二个参数是可选参数我们来试试换种写法
    $(".ul_two>li").on("click", function () {
        console.log(this)
    })
    // 来，我们现在移除某个子元素的事件
    $(".ul_two").children().eq(0).off("click");
    //你会发现现在可以移除掉第一个子元素的事件

    //不能对未来元素实现绑定
    var newli2 =  $("<li>b未来元素</li>");
    $(".ul_two").append(newli2)



    // 重要   重要
    // 那为什么会造成这种情况呢
    
    // 当我们在on函数的参数里面传入了子元素的参数  on的绑定机制类似于事件绑定，所以我们才不能移除某个子元素的事件，能对未来元素实现绑定

    // 而当我们不传入子元素的参数，on的绑定机制相当于循环绑定，所以此时我们可以移除某个子元素的事件,但不能实现对未来元素实现绑定
</script>