解决使用JQuery或JS动态添加的元素无法绑定事件的问题

已于 2023-07-24 17:40:09 修改
阅读量682 收藏 2
点赞数
文章标签： js jquery
于 2021-05-12 15:18:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013952845/article/details/116709270
版权

jquery on()绑定的点击事件在js动态新添加的元素上无效

js动态添加新的元素时，无法使用jquery的click等事件解决办法

$(document).on("click",'.class',function(){……});

亲测使用这个方法就可以！

政东.zd
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery关于如何为动态添加元素绑定事件
码农米格的博客
03-10 682
JQuery关于如何新增元素绑定事件 事例如下： 头部： <head> <meta charset="UTF-8"> <title></title> // ==================style可以忽略，这里只是为了能够看清做的简单样式================ <style> div{ mar...
JQuery为动态元素绑定事件
三明治文鱼的博客
07-27 1847
在前端开发的时候需要一个场景需要为使用AJax动态加载出来的元素绑定一个popup事件，但是发现如果直接在js代码中打开要动态加载的元素的popup的功能无效。本文讨论了出现的原因及解决办法。
js动态添加的元素不能触发绑定事件解决方案
xxwd12的博客
12-09 275
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.11.0/jquery.min.js" ></script> 正确实例 $('.table').on("click",'a.cancel',function(){ alert(11) }); 错误实例 $...
JavaScript动态生成元素绑定事件时的一些问题、解决与思考
qq_52753587的博客
12-07 1295
先上结论: 在用js给动态生成的dom元素添加事件时会遇到很多坑。 坑1：使用了 queryselectorall方法获取元素，这个方法获得的是一个静态的Nodelist伪数组，这意味着之后无论你如何改动DOM节点，它都岿然不动，这真是太坑人了T——T，可能这就是便捷的代价吧。使用getElementByTagName或者getElementByClassName就行了。 坑2：在给动态生成的dom元素绑定事件时，最好使用事件委托的方式来绑定。通过给一个静态的父级元素绑定事件，之后无论生成多少子元素都能
js给动态创建出来的元素添加事件
文龙刚的博客
12-15 2896
js给动态创建出来的元素添加事件
js动态添加的元素不能绑定事件的解决方案
weixin_42958028的博客
06-27 378
js动态添加的元素不能绑定事件的解决方案 // An highlighted block var foo = 'bar'; $("父元素").on('click', '子元素', function(){})
【JS】动态添加的元素绑定点击事件在移动端不生效
SZnAl的博客
07-13 3471
蜂鸟视图 蜂鸟云 移动端点击事件无法触发
JS动态添加元素后事件不起作用失效
qq_51554120的博客
07-20 3618
2、同样，当你使用类似于varaa=document.getElementsByTagName(“动态生成的元素”);来获取动态生成的元素的时候也是获取不到的，因为网页只会执行一次初始化绑定，之后动态生成的dom元素也是监测不到的。1、onclick事件绑定只对dom中存在的元素有效，对于我们后来动态增加的元素是监测不到，所以绑定不了。jQuery事件委托。...
jQuery动态添加元素无法触发绑定事件的解决方法分析
10-18
本文主要讨论了两种解决jQuery动态添加元素无法触发绑定事件的方法： 1. 使用`live`方法（已废弃）： 在jQuery 1.9之前的版本，`live`方法是处理动态元素事件的一个有效途径。`live`方法允许事件处理程序被附加到...
jQuery实现为动态添加的元素绑定事件实例分析
10-18
本文将深入探讨如何使用jQuery为动态添加的元素绑定事件，包括`bind()`, `delegate()`, `live()`, 和 `on()` 四种方法，并通过实例分析他们的用法和适用场景。 首先，基础的`bind()`和`click()`方法是为已存在于DOM...
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
11-29
遇到 jquery无法为动态生成的元素添加点击事件，谷歌一下，整理一下解决方法如下： （中间的元素是动态生成的）， 现在想为添加点击事件， 例子如下： 这是元素内容 //i是动态生成 解决方法如下： $[removed]('click', '.icon', function(e) { alert('i添加点击事件成功'); }); 以上就是小编为大家带来的jqu
解决jQuery使用append添加的元素事件无效的问题
10-18
总的来说，解决jQuery `append`添加元素的事件无效问题，关键在于使用`on`方法代替`click`等直接的事件绑定，并将事件处理器绑定到一个固定的、已存在的父元素上，以便处理动态生成的子元素的事件。这种方法不仅解决...
jquery动态添加元素事件失效问题解决方法
10-25
jQuery提供了多种解决方案来处理动态添加元素的事件绑定问题。其中，`live()`方法曾经是一个常用的解决办法，它允许在页面上已经存在或未来可能出现的元素上绑定事件。然而，`live()`自jQuery 1.7版本后逐渐被废弃，...
JS动态添加元素及绑定事件造成程序重复执行解决
11-27
这个Bug是关于jquery 的on方法绑交互事件，类似于$('#point').on('click','.read-more',function () {})这样的代码造成的程序重复执行，很多人在文章里写到了，也说了用off方法来解绑，但都未能点出问题的本质，几乎...
jQuery动态添加的元素点击事件失效
最新发布
Hero_rong的博客
10-20 907
jQuery点击事件失效
【已解决】JavaScript为控件绑定事件死活不生效
执念斩长河
07-15 531
本博文源于最近操作的JavaScript一个诡异的事情。我在用js一个动态生成的按钮，然后想要为其绑定一个alert的事件，结果发现控制台给我报未定义的错误，我慌的不要要的，经过长时间胡乱尝试终于解决了。
jquery对象给动态生成的元素添加事件失效【项目日常】
m0_62639693的博客
09-11 1221
jquery对象给动态生成的元素添加事件失效 动态生成的元素 一般是ajax异步请求会的响应后根据数据动态渲染生成的，然而ajax技术是异步执行的，ajax请求发送时，ajax请求获得响应需要时间，此时我们的 jquery对象添加事件的代码不会等待ajax请求响应返回，而是继续执行，但是此时因为ajax还未获得请求响应，动态元素还未生成；所以jquery对象事件添加固然会失败。选择器.事件名(function(){ });使用jquery的on函数。
JS append后获得的id、class 无法通过获取节点添加点击事件
weixin_44394502的博客
04-03 1017
原因：append中的节点是在整个文档加载后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件不会生效。根据共同的父级div是在HTML结构中的，所以将循环获得的单击事件代理给div，通过单击获得的class名来判断点击的是哪一个对象，再进行具体操作。解决方法： 事件代理。
解决jQuery新增元素无法绑定事件的方法
qq_44540112的博客
01-16 3888
jQuery处理静态元素的方法 在写html时，我们往往想要通过JavaScript来为页面添加一些事件特效. 例如：我们想在点击某一元素（例如按钮等）来为网页添加新的元素，当你再想在你点击事件新增的元素中在绑定一个事件时往往会出现以下问题。 在写JS代码中我们常常用页面加载事件Window.onload事件来触发事件，但是触发的事件的元素有动态和静态之分。 动态元素写在你...
jquery html动态添加的元素绑定事件详解
04-21
为动态添加的元素绑定事件处理程序，可以使用 jQuery 的 on() 方法。例如，以下代码会为在父元素 div 中动态添加的子元素 span 绑定点击事件处理程序： ```javascript $('div').on('click', 'span', function() { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值