Jquery中on绑定的一些小坑

时间：2021-02-15 04:27:36

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

今天我们来说说关于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: ;

            padding:

        }

        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().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().off("click");

    //你会发现现在可以移除掉第一个子元素的事件

    //不能对未来元素实现绑定

    var newli2 =  $("<li>b未来元素</li>");

    $(".ul_two").append(newli2)

    // 重要   重要

    // 那为什么会造成这种情况呢

    // 当我们在on函数的参数里面传入了子元素的参数  on的绑定机制类似于事件绑定，所以我们才不能移除某个子元素的事件，能对未来元素实现绑定

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

</script>

---恢复内容结束---

---恢复内容结束---

相关文章