JQuery 事件绑定不生效

2023年5月23日 203次阅读 来源: ITman彪叔

一个同时问我，JQuery事件绑定为什么不生效，最好通过查找，发现了问题。
一般而言，JQuery事件绑定不生效，是一些新手经常遇到的问题，其实都是简单的问题，大概分两种情况。 先上代码,以下两个button的事件绑定都不生效。

<html>
<head>
  <script src="../libs/jquery.js"></script>
  <script type="text/javascript">
    $("#button1").click(function () {
        alert("button1 clicked");
    });

    $(function(){
        var div = $("<div><button id = 'button2'>button2</button></div>");
        var body = $(document.body);
        body.append(div);
        div.find("#button2").click(function () {
             alert("button2 clicked");
          });
        div.remove();
        body.append(div);   
       })
    
  </script>
</head>
<body>
<div>
  <button id = "button1">button1</button>
</div>
</body>
</html>

下面讲述原理：

绑定事件在未加载完成之前

首先看button1的事件绑定，

$("#button1").click(function () {
        alert("button1 clicked");
    });

button1在未加载完成之前，通过$(“#button1”).click方法来进行事件绑定，由于此时未加载完成，实际上$(“#button1”)是一个空数组，所以最终的结果是未对任何元素进行事件绑定。 那么如何解决这个问题呢，其实这个问题本不应该发生，一般新手比较容易出问题，解决的方式很简单，把事件绑定放在加载完成之后，JQuery的做法是：

$(function(){
$("#button1").click(function () {
        alert("button1 clicked");
    });
})

绑定事件后移除了元素重新加入

再看button2，button2首先通过JQuery 的方法被创建出来，然后被加入到body中，然后绑定事件，之后从body中移除，然后在加入body中：

var div = $("<div><button id = 'button2'>button2</button></div>");
        var body = $(document.body);
        body.append(div);
        div.find("#button2").click(function () {
             alert("button2 clicked");
          });
        div.remove();
        body.append(div);   
       })

此时点击也不会生效，这是因为，在从文档中移除的时候，JQuery 会自动把绑定的事件移除掉了，然后在加入的时候，事件绑定已经不存在了；这种情况应该如何解决呢？ 一般来说，如果某些元素存在频繁的添加 移除 在添加的操作，可以考虑delegate的方式，比如：

 var div = $("<div><button id = 'button2'>button2</button></div>");
        var body = $(document.body);
        body.delegate('#button2','click',function(){
            alert("button2 clicked");
        });
        body.append(div);
        // div.find("#button2").click(function () {
        //      alert("button2 clicked");
     //      });
        div.remove();
        body.append(div);

总结

最终正确的代码如下：

<html>
<head>
 <script src="../libs/jquery.js"></script>
 <script type="text/javascript">
   $(function(){
      $("#button1").click(function () {
       alert("button1 clicked");
        });
       var div = $("<div><button id = 'button2'>button2</button></div>");
       var body = $(document.body);
       body.delegate('#button2','click',function(){
           alert("button2 clicked");
       });
       body.append(div);
       div.remove();
       body.append(div);   
      })
   
 </script>
</head>
<body>
<div>
 <button id = "button1">button1</button>
</div>
</body>
</html>

根据留言建议，可以考虑把delegate 改成on，也是一样的，而且官方建议用on,如下：

body.on('#button2','click',function(){
           alert("button2 clicked");
       });
    原文作者：ITman彪叔
    原文地址: https://www.jianshu.com/p/2e1edb42f429
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞