jQuery绑定事件,dom刷新后绑定事件失效

最新推荐文章于 2024-01-10 17:41:24 发布

小小鸟008

最新推荐文章于 2024-01-10 17:41:24 发布

阅读量1.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36412715/article/details/105052222

版权

前端专栏收录该内容

35 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            // 1绑定事件
            $(".btn").click(function (event) {
                 console.log("aaa");
            });

            // 2替换dom元素后，再次点击，就没有事件了。
            $("input").click(function () {
                $("#parent").html($("#hide")[0].innerHTML);
            });          
        });

    </script>
</head>
<body>
   <div id="parent">
       <button class='btn'>按钮</a>
   </div>

    <div style="display:none" id="hide">
        <button class='btn'>按钮</a>
    </div>

    <input type="button"  value="replace"/> 
</body>
</html>

1.页面加载完成，div初次加载就有button节点，此时是没有问题的。
2.使用局部刷新改变div的内容后，初次加载的时候事件已经绑定过了节点对象，使用局部刷新后，虽然节点名称参数都是一模一样的，但是已经不是同一个DOM对象了，所以刷新后绑定的事件会失效。

解决方法：

 //用on委托代理的方式绑定。只要父元素是一开始就存在的，将事件委托给这个父元素。
 //委托的原理：一开始给btn绑定的事件会冒泡到父元素。父元素也绑定了click事件，此后就会触发父元素的点击事件。
  $("#parent").on('click','.btn',function(){
   	console.log("bbb");
  })