JQuery事件绑定解绑方法小结_jquery如何进行事件解绑-优快云博客

本文链接：https://blog.youkuaiyun.com/iTaylorfan/article/details/107082215

本文详细讲解了在JQuery中如何正确地使用事件绑定和解绑方法，包括bind(), delegate(), on(), unbind(), undelegate(), off()等，并通过实例演示了动态添加元素后事件的处理方式及解绑事件时对子元素的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用的方法

绑定：bind()、delegate()、on()
解绑：unbind()、undelegate()、off()
此外还有live() 不过JQuery1.9及其以上版本删除了此方法
推荐使用on()方法
参考文章点这里

一些小问题

动态添加元素后，事件失效。

用下面这种方式给元素直接添加事件，就会出现此问题

			$(".get").on("click",function () {  /*添加之前有效，添加元素后失效*/
                $(this).parent().remove();   /*点击按钮移除一行*/
            });

动态创建元素前，上面的事件正常触发；动态创建元素后，上面的事件无法触发
用下面这种父级元素给子级元素绑定事件的方式可以解决这个问题。

 			$("#tbd").on("click",".get",function () {   /*解决问题*/
                $(this).parent().remove();   /*点击按钮移除一行*/
            });

解绑时，父级元素对子级元素的影响

使用下面这种普通绑定方式绑定的元素，在父级元素解绑事件时，不会影响到子级元素。

 		   $("#dv").click(function () {
               alert("你点了div");
           }) ;
           $("#dv>p").click(function () {  /*存在事件冒泡的现象 子元素->父元素*/
              alert("你点了p标签");
              //return false;   /*可以解决事件冒泡问题*/
           });
           /*解绑div的点击事件 不会影响到p标签的点击事件*/
           $("#btn1").click(function () {
               $("#dv").off("click");
           });

           //正常方式绑定 父级元素绑定事件解绑不会影响到子元素绑定事件

使用下面这种父给子绑定事件的方式，在父级元素解绑事件时，子级元素的事件也会解绑。

//如果 子元素是由父级元素绑定的则 父元素解绑会影响到子元素

            $("#dv2").click(function () {
               alert("你点了div");
            });
            $("#dv2").delegate("p","click",function () {
               alert("你点了p");
            });
            /*解绑父元素的点击事件*/
            $("#btn2").click(function () {
                $("#dv2").off("click");
            });
            /*子元素的点击事件也解绑了*/

单独解绑子级元素事件的方法

				$("#btn3").click(function () {
                $("#dv2").off("click","**");  
                //固定写法只解绑子元素  只有在父给子绑定的情况下才有效
                //$("#dv2").off();     //移除区域内所有事件
            });

测试的代码

问题1


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery动态添加元素On()方法失效问题</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            $("#add_data").on("click",function () {    /*添加数据*/
                var str=$("#tbd").html();  /*获取tbody已经有的html内容*/
                str+="<tr><td>"+"JavaScript基础"+"</td><td>"+"哈尔滨佛学院"+"</td><td class='get'>GET</td></tr>";  /*字符串拼接*/
                $("#tbd").html(str);   /*覆盖原来的html内容*/
            });

            $(".get").on("click",function () {  /*添加之前有效，添加元素后失效*/
                $(this).parent().remove();   /*点击按钮移除一行*/
            });
            $("#tbd").on("click",".get",function () {   /*解决问题*/
                $(this).parent().remove();   /*点击按钮移除一行*/
            });
        });
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .table{
            top: 50px;
            width: 300px;
            height: auto;
            /*background-color: #ecaeaa;*/
            position: relative;
            margin: auto;
        }
        .table table{
            text-align: center;
            width: auto;
            border: 1px solid black;
            border-collapse: collapse;
        }
        .table table thead td{
            border: 1px solid black;
            padding: 5px;
            background-color: #a3ebff;
            font-family: 华文行楷;
            font-size: 18px;
        }
        .table table tbody td{
            border: 1px solid black;
            padding: 5px;
            background-color: #c8f8ff;
        }
        .get{
            color: blue;
        }
    </style>
</head>
<body>
<div class="table">   <!--表格div-->
    <button id="add_data">添加数据</button>
    <table>
        <thead>
        <tr>
            <td>课程名</td>
            <td>开设学院</td>
            <td>已学会</td>
        </tr>
        </thead>
        <tbody id="tbd">
        <tr>
            <td>Java基础</td>
            <td>哈尔滨佛学院</td>
            <td class="get">GET</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

问题2


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解绑事件的一些问题</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
           $("#dv").click(function () {
               alert("你点了div");
           }) ;
           $("#dv>p").click(function () {  /*存在事件冒泡的现象 子元素->父元素*/
              alert("你点了p标签");
              //return false;   /*可以解决事件冒泡问题*/
           });
           /*解绑div的点击事件 不会影响到p标签的点击事件*/
           $("#btn1").click(function () {
               $("#dv").off("click");
           });

           //正常方式绑定 父级元素绑定事件解绑不会影响到子元素绑定事件
            //如果 子元素是由父级元素绑定的则 父元素解绑会影响到子元素

            $("#dv2").click(function () {
               alert("你点了div");
            });
            $("#dv2").delegate("p","click",function () {
               alert("你点了p");
            });
            /*解绑父元素的点击事件*/
            $("#btn2").click(function () {
                $("#dv2").off("click");
            });
            /*子元素的点击事件也解绑了*/

            $("#btn3").click(function () {
                $("#dv2").off("click","**");  //固定写法只解绑子元素  只有在父给子绑定的情况下才有效
                //$("#dv2").off();     //移除区域内所有事件
            });
        });

        /*
        bind()
        unbind()

        on()
        off()

        delegate()
        undelegate()
         */
    </script>
    <style>
        #dv{
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: #ecaeaa;
        }
        #dv2{
            top: 250px;
            width: 200px;
            height: 200px;
            position: absolute;
            background-image: linear-gradient(#ff8477, #ad8fff);
        }
    </style>
</head>
<body>


<button id="btn1">解绑div的点击事件</button>
<button id="btn2">解绑第二个div点击事件</button>
<button id="btn3">只解绑第二个div子元素点击事件</button>
<div id="dv">
    <p>可以点这里</p>
</div>

<div id="dv2">
    <p>这是div2</p>
</div>
</body>
</html>