JQuery 事件绑定不生效

ivan_qhz 发布于2019-08-21 16:57 / 2560人阅读

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

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

下面讲述原理：

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

首先看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 = $("");
          var body = $(document.body);
          body.append(div);
          div.find("#button2").click(function () {
               alert("button2 clicked");
            });
          div.remove();
          body.append(div);    
         })

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

 var 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);

总结

最终正确的代码如下：

云服务器 GPU云服务器 jquery预绑定事件 jquery绑定hover事件 jquery绑定事件on 缓存不生效

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88949.html

JavaScript学习

摘要：和，前者是过滤选择器而后者是子代选择器。第三章中的操作查找节点想要查找元素节点或者是属性节点，就是通过前一章学习的选择器获取相应元素的文本，或者是通过选择器属性名获取某元素相应属性的值。 About Javscript record the thing which maybe forgetten 原生JavaScript Javascript DOM document.writ...

J4ck_Chan 2019-08-19 17:57 评论0 收藏0
细说 jQuery 事件篇（五） - 事件的移除和重绑定

摘要：一种做法是在事件处理程序中使用条件语句进行判断，另一种更彻底的做法就是直接移除该处理程序。事件重绑定我们添加一个按钮，当点击按钮后，所有的事件的处理程序又被重新绑定回来。如果我们需要移除已经注册的事件处理程序，使某些处理程序失效。一种做法是在事件处理程序中使用条件语句进行判断，另一种更彻底的做法就是直接移除该处理程序。移除处理程序假设有个 div 和 button，当我们点击...

boredream 2019-08-19 14:53 评论0 收藏0
jQuery 事件用法详解

摘要：只触发事件解除事件任然会执行自定义事件把多个事件组合起来，或者在特定条件下触发事件，普通的事件绑定是无法满足需要的，可以通过自定义事件来形成组合。 jQuery 事件用法详解简介 jquery 之所以成为最受欢迎的前端库，很大一部分是得益于它的事件具有良好的语义，优秀的兼容性，并且便于管理和扩展。在这里我会介绍 jquery 事件的一些比较基础的用法。实现原理 jquery 事件...

shiina 2019-08-19 18:36 评论0 收藏0
jquery .bind() vs .live() vs .delegate() vs .on()

摘要：但是当我们点击新添加的元素也就是时，却没有把这个加给它。它的原理是利用事件冒泡最终代理给最顶层的。对于动态生成的元素也生效因为其实是绑定在上的。假设我们有这样一段html： book 1 book 2 add a li 1: .bind().bind方法的用法是这样的：targetElment.bind(eventType, eventHandler)所以假入我...

baukh789 2019-08-20 17:23 评论0 收藏0