JQuery 事件绑定不生效

一个同时问我，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>

JQuery 事件绑定不生效

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

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

总结

netcy

引用和评论

UE Websocket 通信

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具