静态内容上的jquery事件委托不起作用 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

JavaScript 事件委托以及jQuery对事件委托的支持

现在单独把事件委托拿出来和大家探讨一下。什么是委托？所谓的委托，现实意义上讲是指将自己的事务嘱托他人代为处理。比如说甲委托乙去做某些事儿，那么，甲则是委托人，乙是被委托人。...事件委托事件委托允许我们不必为某些特定的节点添加事件监听器，而是将事件监听器添加到（这些节点的）某个 parent节点上。...jquery 对事件委托的支持在jQuery里对事件委托的支持，有以下几个函数： ?...与live() 相对应，取消绑定，则用下列代码： $("p").die(); 在事件绑定上，jQuery 提供了一种更通用的函数： on(events,[selector],[data],fn)...第二，理论上委托会导致浏览器额外的加载，因为在容器内的任意一个地方事件的发生，都会运行事件处理函数，所以多数情况下事件处理函数都是在空循环（没有意义的动作），通常不是什么大不了的事儿。

8286 0

简单说 JavaScript中的事件委托（上）

事件委托的原理要说事件委托的原理，我们应该先明白事件冒泡事件冒泡：从目标元素出发，向外层元素冒泡，最后到达顶层（window或document），依次执行绑定在其上的事件。我们来看段代码上绑定的事件，然后又触发了红色 div 元素上绑定的事件，这就是事件冒泡了。事件委托的实现先来段代码事件，第二段绑定了一次事件也就是说，原来在 li 上绑定的事件，现在委托在了父元素 ul 上，而在 ul 上只需要绑定一次就可以了。...事件委托的好处 1、减少了事件监听器，原来需要在多个子元素绑定相同的事件处理函数，现在只需要在祖先元素（一般为父元素）上统一定义一次即可。...还有 JQuery中的事件委托又是怎么做的呢？看这里简单说 JavaScript中的事件委托（下）

5962 0

您找到你想要的搜索结果了吗？

是的

没有找到

使用jQuery.data()查看元素上绑定的事件

最先想到的是浏览器面板上面的，可以选中元素，看元素上面的事件绑定。但浏览器上面看到的是结果量，也就是看到的是已经丢失了事件的元素，但我还是不知道什么时候丢失的。...我可以断点取到每个阶段的HTMLElement元素的状态，但是，这个时候，我却找不到观察其事件绑定情况的方法。谷歌好久，发现JS原生是没法查看事件绑定情况的。...还好，我们都是用的jQuery，用的$.on()。而jQuery自身事件绑定，额外添加了一层事件数组。...，就会返回这个元素上面绑定的所有事件。...jQuery.data(‘events’)

1.9K0 0

jQuery源码解析之你并不真的懂事件委托及target和currenttarget的区别

一、事件委托（委派）含义：在#A上绑定click事件，但是让#B触发click事件，相当于在 #B 上假绑定了 click 事件也就是说：#B 委托了 click 事件给了 #A（在 #A 上绑定...click事件，但只能由子元素触发父元素上绑定的事件 $("#A").on("click" ,"#B",function (e) { console.log("点击了B，即B委托A的click...}) ---- 二、jQuery 的事件委托顺序：举例： ?...即委托在#A上的事件数量 if ( selector ) { //在下标为handlers.delegateCount++的位置插入委托事件 handlers.splice...A的click事件被点击了") }) ---- 三、jQuery 绑定事件上的 event 上的 target、currenttarget 和 delegateTarget 的区别？

6842 1

前端系列第1集-什么是Dom事件流?

当一个事件在一个元素上触发时，它会在该元素上被处理，然后逐级向上冒泡直到文档根节点，这就是事件冒泡。在事件冒泡的过程中，每个处理函数都可以阻止事件继续向上冒泡，也可以停止事件默认行为。...事件委托是一种优化事件处理程序的方式，通过将事件处理程序绑定到父元素上，可以减少事件处理程序的数量，提高页面性能。当一个子元素上的事件被触发时，该事件会冒泡到父元素，由父元素上的事件处理程序处理。...编码规范在编写代码时，应该考虑事件流的方向，并且合理使用事件委托，减少事件处理程序的数量。...在使用事件委托时，需要注意事件的目标元素可能不是绑定事件处理程序的元素，需要在事件处理程序中使用事件对象来获取目标元素。调试技巧当事件处理程序不起作用时，可以使用浏览器的开发工具来调试。...工具和库现代浏览器都支持事件流，可以使用原生的JavaScript来处理DOM事件。同时，也有一些流行的JavaScript库和框架，如jQuery、React等，可以方便地处理事件。

2141 0

最近开发一个较复杂的单页应用的些许感想

最近的工作在做一个单页应用的部分功能的升级。该应用是所谓的前后端分离的：前端，后端是两个项目。启动项目时，前端只需起一个静态服务器，后端用命令行起即可。前端负责页面输出。...这是我做的第一次做单页应用，也是第一次在正式项目里用Angular，所以遇到了不少坑，记录如下页面切换时（非页面刷新，只是hash发生变化，ng-view里的内容根据路由进行更新），用jQuery抓取新页面的元素抓不到...或者如果只是给一些元素绑定事件，可以用事件委托。多次进入同一个页面，导致同一个js被多次执行导致的问题。因为页面没有刷新，事件委托的那元素上的事件会被绑定多次。...解决方案是，绑事件前，先接触绑定事件。 Bootstrap 3弹出框动态生成元素有时会出现幽灵的情况：元素生成好之后的元素，用jQuery也抓取不到那元素。。。...其双向绑定，不依赖于页面结构尽量不要用事件委托，如果用，要在绑定事件前解除绑定来避免多绑。当然也有可能导致错绑其他页面的元素。

4402 0

jQuery基础

中each静态方法和map静态方法的区别 1.each静态方法默认的返回值就是，遍历谁就返回谁 map静态方法默认的返回值是一个空数组 2.each静态方法不支持在回调函数中对遍历的数组进行处理...事件委托什么是事件委托？...可以找一个在入口函数执行之前就有的元素来监听动态添加的某些事件为什么要事件委托新增的节点没有click响应,因为jQuery入口函数加载$("ul>li").click时没有把...新增的节点也绑定事件，因此如果要让新增的节点也要绑定事件，要用到事件委托示例 jQuery入口函数加载$("ul>li").click时没有把新增的节点也绑定事件，因此如果要让新增的节点也要绑定事件，要用到事件委托

1.7K2 0

如何实现动态添加的元素添加点击事件

在页面开发过程中常常遇到需要动态添加元素，然后给这一元素绑定相关事件的情况，这种情况下一般需要给元素加上相关属性，然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢？...第二种是通过事件委托的原理进行处理，事件委托将一个事件监听器实际上绑定到整个容器，然后每个列表项被点击就可以访问，这样效率更高。...：这称为事件委托，其工作原理如下。...该事件附加到staticAncestors应处理的元素的静态父级 ( )。每次在此元素或后代元素之一上触发事件时，都会触发此 jQuery 处理程序。...，dosomething您会将事件绑定到已经存在的父级（这是这里问题的核心，您需要绑定到存在的东西，不要绑定到动态内容），这可以（也是最简单的选项）是document.

4K2 0

前端|Zepto与jQuery的异同

2、Zepto是jQuery的精简，针对移动端去除了大量jQuery的兼容代码。 3、部分API的实现方式不同。...（1）、针对移动端程序，Zepto有一些基本的触摸事件可以用来做触摸屏交互（tap事件、swipe事件），Zepto是不支持IE浏览器的。...（2）、DOM操作的区别：添加id时jQuery不会生效而Zepto会生效（3）、事件触发的区别：使用jquery时load事件的处理函数不会执行；使用zepto时load事件的处理函数会执行。...（4）、事件委托的区别：zepto中，选择器上所有的委托事件都依次放入到一个队列中，而在jquery中则委托成独立的多个事件。...会忽略盒模型，始终返回内容区域的宽/高（不包含padding、border）。

7161 0

【Java 进阶篇】深入理解 JQuery 事件绑定：标准方式

事件代理是一种委托机制，通过将事件绑定到父元素上，从而实现对子元素的事件监听。这对于大型应用程序和动态内容非常有用。的网站，而是触发了我们定义的回调函数。标准方式：事件委托的应用事件委托是一种优化性能的方式，特别适用于需要大量事件绑定的情况。...通过将事件绑定到父元素上，然后利用事件冒泡原理，在父元素上捕获事件并判断具体触发事件的子元素，从而减少了事件绑定的数量。 <!...; }); 在这个例子中，我们使用了事件委托，将点击事件绑定到了 ul 元素上，但指定了只有 li 元素被点击时才触发回调函数...总结通过本篇博客，我们深入学习了 JQuery 的标准事件绑定方式，涵盖了基础事件绑定、事件代理、多个事件类型、解绑事件、阻止默认行为和冒泡、以及事件委托的应用。

1974 0

jQuery

操作文本内容 html() =>语法：元素集合.html() 获取该元素的超文本内容，以字符串的形式返回获取的时候为了保证 html 结构只能获取第一个的元素的超文本内容元素集合.html(‘内容.../jquery/jquery.min.js"> /* jQuery 的事件绑定 1. on() + 事件绑定, 根据传递不同的参数做不同的事情...元素结合.on(事件类型, 选择器, 事件处理函数) => 事件委托的绑定 => 把选择器元素委托给元素集合里面的元素 => 注意: 选择器元素要是元素集合...元素集合.on(事件类型, 选择器, 数据, 事件处理函数) => 事件委托的形式, 带上传递参数 => 把选择器所属的事件, 委托给了元素集合内的事件...() { // console.log(this) // }) // 1-2. on(事件类型, 选择器, 处理函数) // 给 li 做了一个事件委托, 委托给 ul

1.8K1 0

jQuery事件委托

在jQuery中，事件委托是一种优化事件处理的技术，它利用事件冒泡的机制，将事件处理程序绑定到一个父级元素上，从而减少事件处理函数的数量，并实现对动态添加的子元素的事件处理。什么是事件委托？...事件委托是一种将事件处理程序绑定到父级元素上的技术，它利用事件冒泡机制，当子元素触发事件时，事件会冒泡到父级元素，从而触发绑定在父级元素上的事件处理程序。...提高性能：由于事件委托将事件处理程序绑定到父级元素上，避免了为每个子元素都绑定事件处理程序的开销，从而提高了性能。如何使用事件委托？在jQuery中，我们可以使用on()方法结合选择器来实现事件委托。...通过选择器，我们可以指定要委托的子元素，然后在父级元素上绑定事件处理程序。...当元素被点击时，事件会冒泡到父级元素上触发事件处理程序，通过$(this)可以获取当前点击的元素，并输出其文本内容。

1.1K1 0

jQuery源码解析之jQuery.event.dispatch()

this[ jQuery.expando ] = true; }; 解析：简单来说，就是把原生event事件上的常用属性赋值到了jQuery的event上 $("#A").on("...the remaining (directly-bound) handlers //最终冒泡到this元素 cur = this; //1<2 //将除委托事件的事件...handler: ƒ, guid: 2}, // ] //}] return handlerQueue; }, } 解析：注意下这个双层循环，目的是把每一层的委托事件的集合...push进matchedHandlers，然后再将matchedHandlers放进handlerQueue队列在处理完每层的委托事件后，将剩下的自身绑定事件再push进handlerQueue队列中...A的click事件被点击了") }) 那么会先循环并执行委托事件，即handler=function (event) {console.log(event,"点击了B，即B委托A的click事件被点击了

7992 0

jQuery之事件绑定到触发全过程及知识点补充

handler: handler, //索引，用于关联元素和事件 guid: handler.guid, //事件委托的标志，也是委托的对象选择器...可以看到 jQuery的事件和触发事件的handler是分离的，事件集合存在事件缓存dataPriv的events上， //获取数据缓存 elemData = dataPriv.get( elem...two触发') }) events是jQuery内部的事件队列 handle是真正绑定到element上的事件处理函数 body:{ events:{ click:[ 0:{...： $("#one").off("click.one") 七、jQuery.event.special 的处理机制绑定的事件，有些是不能统一处理的，比如load事件，是不支持冒泡的，所以即使开发者未用...trigger方法了关于$().trigger()的源码解析请看：jQuery源码解析之trigger() ---- 最后，附上自己做的 jQuery事件绑定到触发全过程的流程图： ?

7931 0

简单说 JavaScript中的事件委托（下）

，把事件绑在了ul上，没有给每个 li 都去绑定事件，看上去也是实现效果了，但是如果 li 里面还有子元素，那么这么去绑定事件就不行了，当点击 li 里面的子元素时，就出现问题了。...看图，现在这样，不管是点击 li 还是 li 的子元素，就都可以打印出内容了。...jQuery中的事件委托 jQuery中事件委托主要是靠on( ) 方法，我们先来看看 on( ) 方法的使用说明 on( ) 方法主要有以下两种形式的用法用法一 jQueryObject.on...selector 可选/String类型，一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。...事件委托的地方，应该还是比较多的，希望大家都能理解这个东西。

4844 0

js事件委托的理解转

事件委托也叫事件代理，事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理某一类型的所有事件，何为事件冒泡呢，就是从事件最深的节点开始，然后逐步向上传播事件，最大的优点是提高性能一般的做法 <ul...break; } } } } 所写的事件对应新增加的元素是不起作用的...，用事件委托则可以如下：一般写法需要额外调用一次函数，否则onmouseover onmouseout 对于新增加的第5行不起作用 window.onload = function(){...不适合的就有很多了，focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。...我的理解是：事件委托都是在外围的div添加事件，当点击内部的一个元素时，即使这个元素没有onclick事件，依然会从内到外执行onclick事件，js中外部div 添加事件的函数内 var ev = ev

1K2 0

【Java 进阶篇】JQuery DOM操作：CRUD操作的前端魔法

修改元素内容 // 示例：修改某个元素的文本内容 $("#myElement").text("新的文本内容"); 通过text()方法，我们可以修改某个元素的文本内容。...在进行CRUD操作时，有一些小贴士值得我们注意：事件委托在处理大量元素时，可以使用事件委托来提高性能。...通过将事件绑定到父元素上，然后根据触发事件的子元素来执行相应的操作，可以减少事件处理器的数量，提升页面性能。...// 示例：使用事件委托处理点击事件 $("#parentContainer").on("click", ".childElement", function() { // 处理点击事件...$(this).toggleClass("selected"); }); 在这个例子中，我们通过on()方法将点击事件委托给父元素#parentContainer，然后在点击事件发生时，判断点击的是哪个子元素

1924 0

JQuery第三节

“div”).html(“这是一段内容”); //获取内容 $(“div”).html() //设置内容 $(“div”).text(“这是一段内容...jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。...注册委托事件 // 第一个参数：selector，要绑定事件的元素 // 第二个参数：事件类型 // 第三个参数：事件处理函数 $(".parentBox").delegate("p", "click"..., function(){ //为 .parentBox下面的所有的p标签绑定事件 }); 缺点：只能注册委托事件，因此注册时间需要记得方法太多了 on注册事件 2.2. on注册事件(重点)...$(selector).on( "click", function() {}); on注册委托事件 // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定

8073 0

jQuery选择器、Dom操作、样式、事件处理

事件代理 // 事件委托或者事件代理，想让div下面所有的span绑定事件，可以把事件直接绑定到div上 $('div').on('click', 'span', function(e){ console.log...ubind() 适用于任何通过 jQuery 附加的事件处理程序。...不把监听器绑定在匹配的元素上。...利用事件委托机制，把节点处理委托给document。 $(selector).live(event,data,function) ?...，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

2K3 0

【Java 进阶篇】JQuery 案例：全选全不选，为选择添彩

使用 JQuery 选择器选中需要进行全选和全不选操作的目标元素，通常是表格中的多个复选框。为触发元素绑定事件，监听其点击事件。...同时，为了提升用户体验，我们还为选中的行添加了高亮显示效果，使用户更清晰地看到当前选中的内容。实际应用场景全选全不选功能不仅仅局限于表格，它在各种列表、多选项等场景都有着广泛的应用。...使用事件委托提升性能如果你的列表或表格中包含大量的子元素，可以考虑使用事件委托来提升性能。通过将事件绑定到父元素上，然后根据触发事件的子元素来执行相应的操作，可以减少事件处理器的数量。...... }); 在这个例子中，我们通过on()方法将点击事件委托给ul元素，然后在点击事件发生时，判断点击的是哪个子元素li input[type='checkbox']，并执行相应的操作。...这样，即使子元素数量较多，也只需一个事件处理器。 2. 增加用户提示在全选全不选功能生效时，可以给用户一些提示，告诉他们当前的选择状态。例如，在全选按钮上添加一个文字提示，显示当前状态。

3594 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭