jQuery动态添加的元素点击事件失效

于 2023-10-20 15:29:44 发布
阅读量1k 收藏 1
点赞数 3
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hero_rong/article/details/133947500
版权

在使用jQuery绑定点击事件的时候，有时候会遇到点击无效，这种情况大多出现在动态添加元素的时候

一般来说下面这种方法是可以成功的，但是对于动态添加后的元素就不行了

	$(".go").on("click", function() {})

推测上面这个监听函数，是在网页加载的时候就指定了对象,而通过代码追加，如通过js追加的元素，是不能匹配这个事件的。

那么，我们应该使用什么来绑定动态元素呢，支持给动态元素和属性绑定事件的是live和on，其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on，使用on的时候也要注意，on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，可以放在on的第二个参数里面。

$("body").on("click", ".go", function() {})

参考了大佬的链接

Hero_rong
关注
jquery动态添加元素事件失效问题解决方法
10-25
当使用脚本动态添加元素xxx时，但事件失效，最后使用jquery中on方法解决脚本动态添加元素,需要的朋友可以参考下
JQuery设置onclick事件无效的处理方法
热门推荐
阿达King哥的博客
05-23 2万+
//必须先清除原有的事件 $("#" + ctrId).attr("onclick", "");  //再重新绑定新的事件  $("#" + ctrId).bind("click", function() {  locate(ctrId); });
jQuery on()方法绑定动态元素的事件无响应
也许明天 '的博客
12-14 478
下面方法只为第一个class 为 btn 的button 绑定了click事件，点击追加元素按钮 使用append动态创建的button则没有绑定。jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给动态创建的元素绑定指定的事件。
解决jquery绑定点击事件失效问题
小小白的博客
12-26 2596
解决jquery绑定点击事件失效问题
jQuery给动态添加的元素加点击事件失效的原因以及解决办法
qq_44782585的博客
02-21 1805
一、问题描述 　　用jQuery的append()方法动态添加了一段html代码之后，发现在为新添加的元素绑定click事件时无法获取该新元素。 二、解决方法 使用jQuery的on（）方法添加元素。 三：具体代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery on()方法测试</title>...
解决使用JQuery或JS动态添加的元素无法绑定事件的问题
u013952845的博客
05-12 717
jquery on()绑定的点击事件在js动态新添加的元素上无效 js动态添加新的元素时，无法使用jquery的click等事件解决办法 $(document).on("click",'.class',function(){……}); 亲测使用这个方法就可以！
解决jQuery使用append添加的元素事件无效的问题
10-18
总的来说，解决jQuery `append`添加元素的事件无效问题，关键在于使用`on`方法代替`click`等直接的事件绑定，并将事件处理器绑定到一个固定的、已存在的父元素上，以便处理动态生成的子元素的事件。这种方法不仅解决...
解决jquery appaend元素中id绑定事件失效的问题
10-19
在jQuery中，动态添加元素（如使用`append`方法）并尝试为这些新添加的元素绑定事件时，可能会遇到一个问题：绑定的事件无法正常触发。这是因为JavaScript的事件处理方式是基于DOM（文档对象模型）的，当元素在页面...
【JS】动态添加的元素绑定点击事件在移动端不生效
SZnAl的博客
07-13 3546
蜂鸟视图 蜂鸟云 移动端点击事件无法触发
jQuery中$.click()无效问题分析
12-09
今天做表格前台导出到xls时，想自动触发a的点击。但失败。最后找到这个文件。 我尝试过多次用jQuery模拟用户点击a标签的功能，但都没有成功，并且困扰了很久。前段时间的一次发呆，冒出了新的想法，于是就动手进行了测试。 先看下边的代码： 代码如下:  <html> <head>磨途歌-A标签测试1<head> <body>    磨途歌 </body> </html> [removed]<
jQuery点击按钮事件失效的解决方法
2301_79326510的博客
10-02 605
通过以上方法，您可以解决jQuery按钮点击事件失效的问题。确保正确加载jQuery库，确保DOM已加载完成，使用正确的选择器选取按钮元素，并避免重复绑定事件。检查您的其他代码是否存在语法错误或逻辑错误，这可能会导致按钮点击事件失效。使用浏览器的开发者工具（如Chrome的开发者工具）来检查控制台错误，并逐行调试您的代码。可以使用jQuery提供的选择器来选取DOM元素，如ID选择器、类选择器或标签选择器等。当使用jQuery编写按钮点击事件时，有时候会遇到点击按钮后事件无法触发的情况。
jquery append元素之后 点击事件失效
zhaoyy0513的博客
07-25 1566
原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件。 解决方案：事件委托方式解决，在选择元素上绑定一个或多个事件的事件处理函数。 html代码: <dl class="layui-nav-child kq-sys"></dl> jquery代码: var qsSystem = ["...
jquery动态添加表格数据注册事件无效的处理办法
韦_恩的博客
03-25 685
今天在做分页的时候遇到了一个问题，就是append动态添加的tr行实现表格行添加，但是在删除某一行的时候发现注册的jquery事件不好使了，可原来静态的时候明明是好使的。经过一番寻找，终于明白了怎么回事，其实就是执行顺序的问题。 原因：append中的节点是在整个文档加载完之后开始添加，因此页面不会为append的元素初始化添加点击事件 解决办法：使用事件委托的方式，将指定的事件绑定在docu...
jquery动态改变onclick属性失效的问题!
weixin_34275734的博客
12-04 301
<li id="" onclick =""></li> 虽然在很多时候，都是非常不推荐这样写的，但是还有有些时候会碰到这样的代码。 那么你可能在某些时候需要去修改onclick 的属性如下： $("#id").attr("onclick",url); 这样的代码，在chrome和firefox 中可以得到你想要的结果。 遗憾的是在ie中，至...
jquery 动态增加的html使得click事件失效
coloma2012的博客
03-05 1670
使用ajax读取数据列表，，class为“item”,用$(“.item”).click(function(){ //do selting})，后面通过ajax加载进来的列表中的item按钮，点击事件会失效。最简单的方法就是直接在标签中写οnclick=””，但是这样写其实是有点low的，最好的方式还是通过给类名绑定一个click事件。live()函数会给被选的元素绑定上一个或者多个事件处理程序，并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。
jQuery 事件 - delegate() 方法
一万个小时
06-17 587
一、实例： 当点击鼠标时，隐藏或显示 p 元素：$("div").delegate("button","click",function(){ $("p").slideToggle(); }); 二、定义和用法 delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处
动态生成的DOM不会触发点击事件的原因及解决方法
MggnHaskell的博客
10-08 543
为了解决这个问题，我们可以使用事件委托的方式将点击事件绑定到父元素上，并在事件处理程序中检查事件目标是否匹配我们期望的子元素。然而，如果在事件绑定之后动态生成新的DOM元素，并且没有为这些新元素单独绑定事件处理程序，那么它们就无法触发点击事件。动态生成的DOM元素无法触发点击事件的主要原因是事件委托的机制。通过使用事件委托，我们可以确保动态生成的DOM元素也能够触发点击事件，而无需为每个元素单独绑定事件处理程序。要解决动态生成的DOM无法触发点击事件的问题，我们可以使用事件委托的方式来处理。
replacewith 点击事件失效了
最新发布
09-25
`replaceWith()` 是 jQuery 中的一个函数，它用于替换被选元素与其后代的内容，并返回新插入内容的元素。如果点击事件失效，可能是以下几个原因： 1. **选择元素错误**：确认是否选择了正确的元素来绑定事件。检查语法和元素是否存在。 ```javascript $("#myButton").on("click", function() { // 替换操作 }); ``` 2. **事件绑定位置问题**：如果 `replaceWith()` 被放在了事件处理程序之后，那么原点击元素可能已经被替换，新生成的元素可能并未绑定上点击事件。在这种情况下，可以在替换之前绑定事件： ```javascript var element = $("#myElement"); element.on("click", function() { element.replaceWith(newContent); }); ``` 3. **事件冒泡问题**：`replaceWith()` 可能会阻止事件冒泡，导致点击事件无法传递到父级元素。检查是否有其他阻止冒泡的情况发生。 4. **动态加载和DOM修改**：如果元素是在页面加载后动态添加的，记得使用事件委托来绑定事件，以确保新的元素也能响应。 5. **浏览器兼容性**：`replaceWith()` 在某些旧版本的浏览器中可能存在兼容性问题，可以尝试使用 `html()` 或 `innerHTML` 替代。 如果以上情况都不是问题，提供具体的代码片段以便进一步分析。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值