append之后无法触发点击事件的解决办法

最新推荐文章于 2021-10-02 00:39:14 发布
原创 最新推荐文章于 2021-10-02 00:39:14 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #JavaScript #Javascript #javaScript #JAVASCRIPT

本文介绍了如何解决动态生成元素的点击事件无法触发的问题，并提供了一种解决方案：使用jQuery的live方法来绑定事件。 
发现是因为append后事件还没有挂上，所以无法触发点击事件，解决办法：

$('#...').live('click', function(){

});

就可以了，不过据说live效率比较低。

jquery 关于使用 append 追加 元素后 事件无法触发
易天海
06-21 3008
原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的click事件没有生效。 解决方案：事件委托方式解决，将指定的事件绑定在document上或者绑定到一开始存在的其它元素身上，只要append元素符合指定的元素，就会绑定此事件 。 function loadLevel(Id, i) { var...
JS动态append之后点击事件无效
weixin_45127183的博客
06-07 2131
今天做项目用了append向HTML里面添加结构代码，代码添加之后，单击事件就没反应了。搞得我一脸懵逼，调了代码很久实在不行，我百度了一下才发现，append添加的节点单击事件是不会生效的。 原因： 原来append中的节点是在整个文档加载后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件不会生效。 解决方法： 于是我只好改用事件代理来完成这次我的项目...
解决append 添加元素 无法触发事件的问题
weixin_33725807的博客
04-05 764
用append 添加的元素 如： function () { var userlist=['l1','l2','l3']; for(var i=0;i<userlist.length;i++) { $('#ul').append('<li alt="'+userlist[i]+'">userlist[i]</li>'); }添加后 单...
append添加元素后点击事件失效
weixin_42132776的博客
07-12 1717
今天发现使用append方法添加的标签，无法触发点击事件。 失效原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的click事件没有生效。 解决方法：事件委托方式解决，将指定的事件绑定在document上，只要append元素符合指定的元素，就会绑定此事件 。 $(document).on("click","指...
jQuery 使用append动态添加的 元素不触发 已定义的 点击事件
qq_40797485的博客
01-04 1538
1、问题描述： 用 append 动态添加的 元素 不触发定义好的 点击事件，而原来页面上就有的元素可以触发 &lt;div class = "tree"&gt; &lt;ul class = "tree_ul"&gt; &lt;a class="ne_font"&gt;弹窗&lt;/a&gt; &lt;/ul&gt; &l
jquery 关于使用 append 追加 元素后 事件无法触发
weixin_33779515的博客
01-30 402
当在使用js或jQuery创建元素时,用 on(事件，function(){代码}) 或者 事件(function(){代码 })绑定事件时 在使用append添加元素后 由于是在页面加载完成之后进行的元素添加，所以事件不会触发（个人理解，不对勿喷） 这时我们需要给元素绑定事件 　　解决方案1： on绑定 　　　　$("父级元素").on("事件","当前元素",function()...
处理jQuery append加入的元素 绑定事件无效的方法
qq_37273784的博客
10-29 2008
问题是：通过jQuery append（或者before、after，一样）新添加进网页的元素，常用的事件不能触发，比如：append了id 为 abc 的元素，那么 $(#abc).click(function(){})是没有效果的。 1. 网上说要用live()函数，亲测无效，应该是jQuery的版本问题，反正到目前为止是不能用了； 2. 解决方法：用on函数，要注意格式(楼主搞了半天，因...
解决jQuery使用append添加的元素事件无效的问题
12-12
总结来说，解决jQuery中使用`.append()`添加元素后事件无效的问题，关键在于使用`.on()`方法，并将事件绑定到尽可能接近动态元素的静态父元素上，以减少事件冒泡带来的性能开销。同时，理解`.on()`, `.off()`, 和 `....
【JQ】动态添加的元素无法触发绑定事件的解决办法
weixin_44707049的博客
10-02 1246
情景 如上面的模态框，点击左边的添加按钮，会把整个div添加到右边，点击右边的删除按钮，则把整个div添加回左边，就类似于穿梭框的样子。 不难，下面是一开始想到的方案： $('#SelectedDevice button').click(function(){ $(this).text('添加'); let this_device = $(this).parent().parent(); this_device.remove();//从待选设备框中移除 $('#DeviceToBeSelect
jQuery动态append添加元素后点击事件失效
1 Byte 的博客
12-21 1901
1. 问题描述：在div中动态添加span元素，之后执行$(selector).click(function(){var param = $(this).text();})无法触发事件。 2. 原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的click事件没有生效。 3. 解决方案：事件委...
jquery append加入新元素后事件无效处理方法
周馒头_资料
12-27 2101
jquery append加入新元素后事件无效处理方法 在很多网站上说是使用live就可以用，但是我发现我使用的jquery的版本是1.9，在1.9后live删除了，所以改用on的方法来处理 　根据jQuery的官方描述，live方法在1.7中已经不建议使用，在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。 　　on方法可以接受三个参数：事件名、触发选择器、事件函数。中
jQuery append加入的元素 绑定事件无效
weixin_34367257的博客
03-12 163
一、问题1是：通过jQuery append（或者before、after，一样）新添加进网页的元素，常用的事件不能触发，比如：append了id 为 abc 的元素，那么 $(#abc).click(function(){})是没有效果的。 解决方法：用on函数，要注意格式 正确格式：$("outerSelector").on('eventType','selector',function...
append追加的html片段，添加点击事件没有反应，解决！
weixin_43942765的博客
06-25 907
对于追加的元素来说，属于未来展现的内容，我们此时不能使用一般点击事情处理，需要用未来事件绑定。 //绑定未来元素 $("body").delegate("#vehicleNumber","click", function(){ console.log(1234) }); 参考地址https://www.cnblogs.com/yangyuke1994/p/10177488.html ......
关于append标签后，点击事件不可用的解决方法
weixin_39724194的博客
04-15 669
今天写前端，用了append追加了一个含点击事件的文本框后，点击事件没反应。 append的代码： var times = '<div class="row cl">\n' + '\t\t\t\t\t<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span&g...
Jquery用append()方法新增加的元素事件失效
dianen7228的博客
08-22 319
$(".addmobile").click(function () { var _html = '<div class="form_group"><div class="form_input"><input type="text" class="ip" value="" name="storename" style="width:67%...
jquery用append添加按钮之后，按钮监听无法使用的解决方法
weixin_30394251的博客
09-21 481
<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script...
append动态生成的元素，无法触发事件的原因及解决方案
MeYeah!的博客
02-26 746
使用append动态生成的元素事件绑定失效了。 click（fn）当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而新添加的元素自然没有绑定到事件。 使用$(document).on(‘事件类型’,‘要选择的元素’,function(){})方法为元素绑定事件on方法包含很多事件，点击，双击等等事件。与click(fn)相比，二者在绑定静态控件时没有区别，但是如果面对动态产生的...
上述问题是通过append追加导致的，如何解决
最新发布
12-13
如果您提到的问题是关于在JavaScript中使用`append()`方法动态添加元素后，复选框的点击事件失效的情况，可以按照以下步骤解决： 1. **重新绑定事件**：在动态添加复选框之后，需要确保为其重新附加点击事件。例如，在jQuery中，你可以这样做： ```javascript var checkbox = $('<input type="checkbox">'); // 动态添加到文档中 $('#container').append(checkbox); // 重新绑定点击事件 checkbox.click(function() { // 处理点击逻辑 }); ``` 2. **确保元素可见**：`append()`虽然会添加元素到DOM，但如果元素处于隐藏状态（如`style.display = 'none'`），它可能仍无法响应点击事件。确保元素显示出来： ```javascript checkbox.css('display', ''); ``` 3. **处理层级问题**：如果弹出窗口的Z-index高于新添加的复选框，导致点击事件被阻塞，你可以调整复选框的层级： ```css #popup .checkbox { z-index: auto !important; /* 或者一个比弹出窗口高一级的值 */ } ``` 4. **事件委托**：如果你的复选框是动态生成并嵌套在某个容器内的，考虑使用事件委托，让容器接收并转发点击事件： ```javascript $('#container').on('click', '.checkbox', function() { // 处理点击逻辑 }); ``` 如果以上方法都无法解决问题，可能要考虑查看是否存在其他的DOM变动影响了事件的触发，或者浏览器兼容性差异的影响。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值