如何将jquery事件绑定到动态添加的多个DOM元素？_jquery动态添加元素绑定事件_Jquery:如何将事件绑定到具有兄弟元素的元素？ - 腾讯云开发者社区

避免先写了DOM操作，但是元素是动态加载的，所以点击不生效，比较好的方法有两个： 1、动态添加的时候加行内事件，比如onclick="funcName()" 在js中写好方法名对应的方法就可以了，如果绑定方法的元素太多...，可以考虑使用方法二； 2、jquery的on事件绑定 eg: on事件可以给动态添加的元素也绑定事件。...console.log("aaa") let num = $(this).parents(".input-group").index(); console.log(num) }) 注意：on事件先是获取到父元素...，然后绑定到子元素上，父元素最好是已经存在的元素，而不是动态添加的。

3.4K4 0

cssjshtml jquery向动态生成的元素添加事件

定义和用法 delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。...使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。...规定要附加事件处理程序的一个或多个子元素。 event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。 data 可选。规定传递到函数的额外数据。...规定当事件发生时运行的函数。 Click me!

3.1K1 0

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

是的

没有找到

jquery获取元素绑定的事件

一个简单的记录，在调试jquery的事件绑定时会用到。查看某元素是否绑定上了事件。...在JQuery1.8之前： obj=$('div.event');obj.data('events'); 在JQuery1.8中： objs=$('div.event');$...._data(objs[0],'events'); 参考： http://stackoverflow.com/questions/12214654/jquery-1-8-find-event-handlers

4.1K2 0

JavaScript 技术篇-js代码触发dom元素绑定事件实例演示，jquery触发元素绑定事件方法

div.login-content > div.content-right > div > div > div.login-panel-input.login-submit-panel > button"); // 调用按钮事件进行点击...login_btn.click(); 可以看到效果图： jquery 通过 trigger() 方法触发点击事件。...div.content-right > div > div > div.login-panel-input.login-submit-panel > button").trigger("click") 使用前提是该 dom...元素必须绑定的事件才能出发，他的祖先元素绑定的事件他触发不了，所以这里要把 Ancestors All 取消勾选一下。

8.9K1 0

jQuery 查找on事件绑定元素的被绑定元素方法

jQuery 查找on事件绑定元素的被绑定元素方法遇到的问题今天写了一个JQ插件,结果里面有一点问题.让我很郁闷.问题演示代码如下 $box.on('click', 'img', function(...当然这是正确的. 而我需要找到 $box 也就是 img 的父级. 如果不是插件的话,我当然可以根据它的ID或者CLASS来进行查询.问题是,我是写的插件,也就是说,我并不知道它的这些信息是什么....当然,如果box在DOM中只存在一个的话,那么也没有问题,直接通过box就可以找到了. 问题是 box 也并不是唯一的.所以,我应该怎么知道这个 box 到底是哪个有点晕.没关系....解决方法很多基础的东西不理解,就会出现我这样的问题.如同事所说,你是还不会爬呢,都学上跑了.因此,踩坑无数啊....解决方法如下: $box.on('click', 'img', function(){ $box.has($(this)) }); 如上,通过 .has 操作,就能找到唯一的父级被绑定元素了.

4.5K1 0

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

最近遇到一个诡异的问题，发现我添加在一个HTMLElement片段上面的事件绑定，会在后续的流程中，无故丢失了。但是，我不知道它是什么时候丢失的。所以我需要要一步步逼近定位到问题。...最先想到的是浏览器面板上面的，可以选中元素，看元素上面的事件绑定。但浏览器上面看到的是结果量，也就是看到的是已经丢失了事件的元素，但我还是不知道什么时候丢失的。...还好，我们都是用的jQuery，用的$.on()。而jQuery自身事件绑定，额外添加了一层事件数组。...（也是这个原因，$.on()可以重复给一个元素的同一个事件绑定多个handler，而直接addEventListener则只能绑定一个，后面的会覆盖掉前面的）扯了这么多，show me the code...，就会返回这个元素上面绑定的所有事件。

1.8K0 0

JQ动态生成的元素，原事件绑定失效

Code： $('code').click(function () { console.log($(this).text()); }); New Code：（.container 是所在的div...'.container').on("click", "code", function () { 　　console.log($(this).text()); }); 之前只是知道官方推荐使用on来生成事件...，并不知道其好处，这次知道了话说，，，真的好久没碰前端了，忘差不多了，O(∩_∩)O~ 动态加载JS 和 CSS 在线浏览PDF之PDF.JS （附demo）几个比较有意思的JS脚本经典JS

1.2K2 0

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

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

3.7K2 0

从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件

先说结论：通过调用事件名的方式和 bind 的方式只能绑定之前存在的元素，后添加的元素不能绑定事件；而 delegate 和 on 的方式绑定元素的方式可以。...1、bind 解绑事件语法： // 解绑单个或多个事件绑定事件的元素.unbind("事件名1 事件名2 ..."); // 解绑所有的事件绑定事件的元素.unbind(); PS：unbind...3、on 解绑事件语法： // 父元素和子元素的所有事件都会解绑父元素.off(); // 父元素和子元素的单个或多个事件解绑父元素.off("事件1 事件2 ..."); // 子元素的所有事件解绑...父元素.off("", "子元素"); // 子元素的单个或多个事件解绑父元素.off("事件1 事件2...", "子元素"); // 父元素中所有的子元素的所有事件解绑父元素.off("", "**"); // 父元素中所有的子元素的单个或多个事件解绑父元素.off("事件1 事件2 ...

7004 0

从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件

6462 0

关于jQuery用bind动态绑定事件无效的处理

最近在进行页面开发，在做页面特效的时候，需要给一个动态加载的按钮赋予一个事件于是不假思索的用$(obj).bind(); 来绑定事件。...但是这样存在一个问题： bind确实能绑定事件，但是那是相对于固定的html标签来说当页面内容属于动态加载的时候，bind事件就存在一个bug, 只能bind一次，当你第二次触发事件的时候就没用了...例如：我给标签赋予一个click ，标签包括内容都是从后台数据读取然后动态加载的。...后面研究发现，jQuery还有个绑定事件的方法：delegate(); 用法如下： $(".sentnum-box").delegate(".a-add-ordergoods","click",function...(){ //js数据代码 }); 这样就能实现对动态数据绑定事件，并永不失效

1.3K2 0

JavaScript 技术篇-通过代码获取dom元素绑定的监听事件，chrome浏览器查看js元素绑定的监听事件

: Array(1)} mousedown: [{…}] mouseout: [{…}] __proto__: Object getEventListeners() 方法可以获取到 dom...元素的监听。...可以看到当前 dom 节点的监听就是 mousedown 和 mouseout。取消勾选 Ancestors All 可以排除当前元素所有祖先元素的监听。...反过来如果想通过代码获取某个元素所有祖先元素的监听可以遍历它的所有上级节点再依次获取所有 dom 节点的监听。

6.5K5 0

为已有点击事件的dom元素添加点击事件,并控制事件函数执行的顺序

我们大家都知道,一个dom的事件流程是先经过事件捕获,然后到事件本身,最后是事件冒泡事件捕获是从父级到子级事件冒泡是从子级到父级现在有个需求,页面有个按钮,本身已经有点击事件的处理逻辑了,内部逻辑我们也不知道...现在的需求是我们需要在点击按钮后执行原有的业务逻辑之前,先执行另一个函数我们可以使用事件捕获来进行操作具体操作如下我们使用事件代理加事件捕获的方式,来实现 <!...{ if (event.target.compareDocumentPosition(childEl) === 0) { console.log('我是新增的业务逻辑

2.4K1 0

「1 分钟学 DOM 基础操作」添加和移除元素样式、添加至元素内、添加和移除事件、计算鼠标相对元素的位置

1.6K3 0

jquery中动态新增的元素节点无法触发事件解决办法

在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的，我们下面就为各位来详细的介绍此问题的解决办法．　　...其实最简单的方法就是直接在标签中写onclick=""，但是这样写其实是有点low的，最好的方式还是通过给类名绑定一个click事件。...解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法，如下：方法一：使用live 　　live()函数会给被选的元素绑定上一个或者多个事件处理程序，并且规定当这些事件发生时运行的函数。...通过live()函数适用于匹配选择器的当前及未来的元素。比如，通过脚本动态创建的元素。...实现如下： $('.liLabel').live('click', function(){ alert('OK'); }); 方法二：使用on 　　可以通过on方法绑定事件，可以绑定到它的父级或者

1.7K2 0

Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件）

所以一开始事件找不到“接头人”就没有执行。扫噶，定位到问题，就好解决了。之所以整理成随笔，是因为我之前没遇到过这个问题，听过事件委托机制，但是根本没研究过不知道适用于什么样的bug场景。...，是通过获取元素的类名被点击后执行对应方法，但是研发套完模板，他会把所有的结构先清空，导致jq根本找不到那个元素，所以事件就不得执行了。...正规点的说：JS异步加载,JQ事件不被执行解决方法（百度的标题，hah） jquery中动态新增的元素节点无法触发事件问题（同上）解决方法： ? ?...值得注意的是：亲测此方法无效，可能是我用的jq的版本太高了，1.9多，已经不支持这个方法了第二个方法： ? 但是缺点是：给一个元素添加多个事件委托机制时，他就挂了。王者方法：on ?...//模拟多个事件!

4.9K5 0

02-老马jQuery教程-jQuery事件处理

jQuery简单绑定事件的方式，可以让我绑定多个事件处理程序跟DOM2级绑定事件的方式一样....在绑定事件之前，一定要确保页面中的DOM元素已经就绪。如果没有就绪或者后面动态添加的DOM元素则不会动态更新事件处理程序。参数： type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。...'); 2.4 事件委托绑定语法： $dom.delegate(selector,[type],[data],fn) 说明：指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，...on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。...// live ：对动态创建的dom元素绑定事件。 // delegate : 事件委托绑定事件。

6.4K0 0

02-老马jQuery教程-jQuery事件处理

jQuery简单绑定事件的方式，可以让我绑定多个事件处理程序跟DOM2级绑定事件的方式一样....在绑定事件之前，一定要确保页面中的DOM元素已经就绪。如果没有就绪或者后面动态添加的DOM元素则不会动态更新事件处理程序。参数： type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。...'); 2.4 事件委托绑定语法： $dom.delegate(selector,[type],[data],fn) 说明：指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，...on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。...on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。

2.7K8 0

jQuery中on()、bind()、live()、delegate()之间的区别

及其以上版本；jquery1.7版本出现之后用于替代bind()，live()绑定事件方式； event 必需项；添加到元素的一个或多个事件，例如 click,dblclick等；单事件处理：例如...它会绑定事件到所有的选出来的元素上它不会绑定到在它执行完后动态添加的那些元素上当元素很多时，会出现效率问题当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题 2 .live()...更适合列表类型的，绑定到document DOM节点上。一旦事件冒泡到document上，jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。...优点这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给所有的元素挨个绑定那些动态添加的elemtns依然可以触发那些早先绑定的事件，因为事件真正的绑定是在document上...data来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素可以用在动态添加的元素上缺点需要查找那个那个元素上发生了那个事件了，尽管比document少很多了

1.2K3 0

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

另外，如果在实际的应用中，很有可能同过js在 div1下动态生成p 元素，这时候，我们相应地还要添加事件处理函数，像这种动态添加的动作很有可能分散在我们应用的很多个角落，这样动态添加处理函数将是一个非常蛋疼的事儿...，就可以轻松搞定P 元素的事件处理函数绑定了，动态添加元素的时候，不需要再手动地绑定处理函数了。...data: 传递到函数的额外数据 fn: 当事件发生时运行的函数概述：指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数...fn : 相应的处理函数描述：jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。...算法：将事件处理函数绑定到容器上，在事件处理函数内获取 event.target，根据不同的event.target作相应的处理应用场景：需要为子元素用一个事件处理函数处理相同的动作；简化不同动作间的结构

7786 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

动态添加的html元素绑定事件的方法

cssjshtml jquery向动态生成的元素添加事件

jquery获取元素绑定的事件

JavaScript 技术篇-js代码触发dom元素绑定事件实例演示，jquery触发元素绑定事件方法

jQuery 查找on事件绑定元素的被绑定元素方法

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

JQ动态生成的元素，原事件绑定失效

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

从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件

从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件

关于jQuery用bind动态绑定事件无效的处理

JavaScript 技术篇-通过代码获取dom元素绑定的监听事件，chrome浏览器查看js元素绑定的监听事件

为已有点击事件的dom元素添加点击事件,并控制事件函数执行的顺序

「1 分钟学 DOM 基础操作」添加和移除元素样式、添加至元素内、添加和移除事件、计算鼠标相对元素的位置

jquery中动态新增的元素节点无法触发事件解决办法

Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件）

02-老马jQuery教程-jQuery事件处理

02-老马jQuery教程-jQuery事件处理

jQuery中on()、bind()、live()、delegate()之间的区别

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

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐