js动态添加元素，元素绑定事件不起效问题解决

于 2024-01-25 17:47:11 发布
阅读量470 收藏 7
点赞数 8
文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MaYuLeMMM/article/details/135849506
版权

js动态添加元素，元素绑定事件不起效问题解决

最近写一个前端点击事件改变左侧列表ul标签

一开始我使用innerHTML 方法滞空ul标签，再用innerHTML 方法进行添加
改完之后发现点击ul标签没有拉开li标签列表
我以为是innerHTML 方法的问题后来改变了创建元素的方法

在这里插入图片描述使用document.createElement方法进行创建元素
此方法照样不起效
后来经过我两天时间的排查
发现滞空之前的前端a标签上面有onclick事件
新创建的a标签并没有触发此事件
在这里插入图片描述简单点说就是你动态添加的元素并不触发之前定义事件

解决办法

将子元素的事件委托给父元素
改变之后的代码在这里插入图片描述我自己的理解是初始化页面js绑定的事件是你滞空之前的a标签，但是你清除了这个标签
之后你动态添加同样的元素，但是js并不认同
委托父元素我感觉就像是事件放在父元素，你动态添加元素也不影响父元素，js绑定的事件就还在，这种委托给我的感觉就是，事件是从父元素开始查，查父元素下面的a标签然后触发。

一个简单的前端问题搞了我两天，心态爆炸，写文章用来记载收藏

一个后端程序员写前端的苦恼

Candies(*￣︶￣)
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery动态添加元素无法触发绑定事件的解决方法分析
10-18
本文主要讨论了两种解决jQuery动态添加元素无法触发绑定事件的方法： 1. 使用`live`方法（已废弃）： 在jQuery 1.9之前的版本，`live`方法是处理动态元素事件的一个有效途径。`live`方法允许事件处理程序被附加到...
JS动态添加元素及绑定事件造成程序重复执行解决
10-18
主要给大家介绍了关于JS动态添加元素及绑定事件造成程序重复执行的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
jquery 动态添加的元素，绑定的事件不生效
猎人在吃肉
11-07 1797
jquery 动态添加的元素，绑定的事件不生效
JS动态添加元素后事件不起作用失效
qq_51554120的博客
07-20 3610
2、同样，当你使用类似于varaa=document.getElementsByTagName(“动态生成的元素”);来获取动态生成的元素的时候也是获取不到的，因为网页只会执行一次初始化绑定，之后动态生成的dom元素也是监测不到的。1、onclick事件绑定只对dom中存在的元素有效，对于我们后来动态增加的元素是监测不到，所以绑定不了。jQuery事件委托。...
【JS】动态添加的元素绑定点击事件在移动端不生效
最新发布
SZnAl的博客
07-13 3467
蜂鸟视图 蜂鸟云 移动端点击事件无法触发
JS：动态追加节点点击事件无响应
qq_42782011的博客
02-18 580
直接$(“选择器”).click不行，用下面的： $(document).on("click", ".btnDetails", function () { layer.msg("学校未反馈，暂无详细数据...", { icon: 6, time: 2000, shade: 0.4 }); });
关于js jquery动态生成的元素增加点击事件不起作用
zp315379004的博客
05-28 1009
$(“#a”).click(function(){ console.log('静态元素，可以显示；但是f') })
js实现动态创建的元素绑定事件
10-21
在JavaScript中，有多种方法可以实现动态元素的事件绑定，但传统的方法对于新创建的元素可能不起作用。这里我们将详细探讨如何使用jQuery库中的`live()`方法来解决这个问题。 首先，让我们理解什么是动态创建的元素...
JS如何实现动态添加的元素绑定事件
10-16
主要介绍了JS如何实现动态添加的元素绑定事件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js 给动态生成的DOM绑定事件
05-06
web前端的朋友们,经常会遇到给由后台返回的数据遍历生成的DOM绑定事件,但是总是绑定不上,那是因为把事件直接绑定到了动态生成的DOM上了,正确的方式是利用事件冒泡给其父元素绑定，这样才能解决问题的哦！
使用JavaScript动态添加HTML语句后，事件失效的解决办法
erhuobuer的博客
10-08 1173
一、问题分析 当我们使用js语法向页面中添加html语句时，经常会出现添加的html语句中绑定的事件无法执行，这是因为当js,css加载后才添加的html语句，这样在js事件加载时去找绑定的选择器（id,class），发现并不存在，因此点击事件会失效。 二、解决方案 使用jQuery 事件 - delegate() 方法 使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由...
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) }); 错误实例 $...
JS为动态生成的元素绑定事件
Doggy的博客
02-09 2770
JS 生成的元素事件绑定注意事项标签： Jquery, addEventListner, removeEventListener, onclick如果页面要通过 ajax 接入数据，那么很多页面元素可能都是等到数据进来后才通过 JavaScript 生成的。如果我们要给生成的元素绑定 click blur focus 等事件，那么因为 ajax 异步传输的特性，可能数据还没有获取到，我们要绑定事件的
如何实现动态添加的元素绑定事件
sinat_41843998的博客
10-21 1413
今天被问道如何给动态加载的数据绑定事件，于是在网上搜索解答方案如下： 第一种是在动态添加的html代码里添加onclick事件，并且传个唯一的参数来判断点击了哪个， <button onclick="Add()">添加</button> <button onclick="Get()">获取</button> <div id="joblist"> <div id="job1" class="job"> <input
jQuery动态绑定事件的方法（超详细）
zy1992As的博客
03-08 4815
以上只是一些常用的jQuery动态绑定事件的方法，jQuery还提供了许多其他方法来处理事件，如.keydown()、.keyup()、.submit()等等。1..on()：这是一个通用的事件绑定方法，可以用于任何事件类型，包括自定义事件。4..delegate()：这是一种早期的事件委托方法，已被.on()取代。5..live()：这是一种早期的事件委托方法，已被.on()取代。3..bind()：这是一个早期的绑定方法，它允许绑定多个事件处理程序，但已被.on()取代。
js动态新增元素，绑定事件不起作用失效问题
hgg923的专栏
03-25 2323
利用on绑定方法，如下代码（说明：.uploadImg是新增元素；） 核心重点：.sendList是页面一直存在的元素，这样才能给动态元素一直绑定事件； 终极办法：$('body').on('change',"动态元素选择器", function() {});（但是从性能角度，不推荐用body这种选择器） $('.sendList').on('change',".uploadImg", f...
jquery对象给动态生成的元素添加事件失效【项目日常】
m0_62639693的博客
09-11 1220
jquery对象给动态生成的元素添加事件失效 动态生成的元素 一般是ajax异步请求会的响应后根据数据动态渲染生成的，然而ajax技术是异步执行的，ajax请求发送时，ajax请求获得响应需要时间，此时我们的 jquery对象添加事件的代码不会等待ajax请求响应返回，而是继续执行，但是此时因为ajax还未获得请求响应，动态元素还未生成；所以jquery对象事件添加固然会失败。选择器.事件名(function(){ });使用jquery的on函数。
jquery动态添加元素后，元素的事件无效（已解决）
weixin_38064520的博客
02-05 3313
jquery动态添加元素后，元素的事件无效（已解决） 基于jquery1.9以上版本作的解决方案 先贴一段正常逻辑写的代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-3.3.1.js" type
jquery html动态添加的元素绑定事件详解
04-21
当您使用 jQuery 向 DOM 中添加新元素时，这些元素需要相应的事件处理程序来响应用户的交互。为动态添加的元素绑定事件处理程序，可以使用 jQuery 的 on() 方法。例如，以下代码会为在父元素 div 中动态添加的子元素 span 绑定点击事件处理程序： ```javascript $('div').on('click', 'span', function() { // 点击事件处理程序 }); ``` 在这个例子中，on() 方法传递三个参数。第一个参数是事件类型，例如 'click'。第二个参数是一个选择器，它指定要绑定事件处理程序的元素，例如 'span'。第三个参数是事件处理程序函数。关键是第二个参数，它指定了要绑定事件处理程序的元素，这个元素可能是动态添加的，因此在添加到 DOM 的时候可能还不存在。但是，当使用 on() 方法时，jQuery 会在父元素 div 上绑定事件处理程序，然后根据选择器 'span' 来过滤出真正的目标元素并触发事件处理程序。这种技术称为“事件委托”，它可以帮助我们在动态添加元素时避免频繁绑定和解绑事件处理程序的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值