jQuery 事件绑定不生效如何解决-职坐标

jQuery 事件绑定不生效如何解决

沉沙 2018-05-28 来源：阅读 1692 评论 0

摘要：一般而言，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);

总结

最终正确的代码如下：

$(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);