【JQ】动态添加的元素无法触发绑定事件的解决办法

最新推荐文章于 2024-04-18 10:24:50 发布
VIP文章 最新推荐文章于 2024-04-18 10:24:50 发布
阅读量1.1k 收藏 2
点赞数 2
分类专栏： JQuery 文章标签： jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44707049/article/details/120582503
版权

情景

在这里插入图片描述

如上面的模态框，点击左边的添加按钮，会把整个div添加到右边，点击右边的删除按钮，则把整个div添加回左边，就类似于穿梭框的样子。

在这里插入图片描述
在这里插入图片描述

不难，下面是一开始想到的方案：

$('#SelectedDevice button').click(function(
最低0.47元/天 解锁文章
不大好不大好
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
&qt；&lt；等xml|Html转义字符
qq_43552564的博客
04-17 249
&qt;<等xml|Html转义字符
使用Jquery解决：动态生成的元素无法绑定事件
此后如竟没有炬火我便是唯一的光
04-20 402
概况 在实际的html页面开发中，很多时候，我们的页面样式不是预先定义的，例如：分页按钮的生成、数据的显示等等，这些数据都是当我们的服务器启动后，客户端浏览器跳到指定页面，然后通过servlet等与数据库进行数据交互，然后动态的生成的表格、按钮等等，往往这些生成的元素还会附带一些交互功能，例如：在表格中生成的一行数据，最后的按钮具有删除这一行的功能，本小结就是为了解决动态生成的元素具有事件效应。 编写html测试 <!DOCTYPE html> <html> <head&
jquery html动态添加的元素绑定事件详解
01-19
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况： <div id=testdiv> <ul></ul> </div> 假设我们要给ul动态添加的<li>绑定click事件形成如下结果 <div id=testdiv> <ul> <li name=apple>apple</li> <li name=pear>pear</li> </ul> </div> [removed] function test(name){ alert(I'm +name); } //做法如下: $(#testdiv ul).on(click,
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
10-23
主要分享了解决jquery中动态新增的元素节点无法触发事件问题的两种方法，感兴趣的小伙伴们可以参考一下
jq的click,change等事件对于页面上新增的dom无效怎么办?
liuzy_perfect的博客
09-08 274
写成如下的形式即可，监听.unit_type的change事件。注意：#result_unit_tbody 必须不是js动态生成的，也就是$()选择器必须选择不是动态生成的父元素。 $("#result_unit_tbody").on('change', '.unit_type',function () { reset_school_unit(); }); ...
jQuery中动态创建元素节点无法触发事件
jinyajun的博客
08-11 7500
jQuery中动态创建元素节点无法触发事件 动态创建代码，如下：<div class="a">点击添加动态元素</div> <p class="b"></p> <!--动态节点放在p标签中-->$(".a").click(function(){ var html = ‘<a class="btn">动态添加的按钮</a>’; $(".b").html(html); })给创建的”a”标
关于js动态加载html元素，html中绑定的click事件不生效的解决办法
卫可冬的博客
12-23 3850
出现这种情况，其实是不清楚js事件委托的原理，就是指未来还不清楚会创建多少个节点,所以暂时没办法直接给他们注册事件。 因为javascript在dom载入之前，就已经把js加载了。 比如： js动态加载如下标签： <button id="query">查询</button> js中的绑定事件如下： $("#query").click(function () { ...
HTML 动态添加元素后为元素绑定的事件不生效
肖波的博客
06-07 2410
昨天有个前端的朋友问我一个问题：在动态添加元素后元素绑定的事件不生效。他大致讲了一下，就是一个列表ul，里面的li元素是动态生成的，他事先在js中使用$("ul li").on(),绑定了事件，但是动态增加了li元素后发现点击事件都没生效。。。。 一听我就知道问题所在了，在动态添加了元素之后需要重新为新添加的元素绑定事件才会生效。另外我也很意外，这么简单的问题居然还有人不知道。仔细一想，可能有些人平时不太注意这些问题，然后才会被困扰。那么我在这里也将这个问题发一下，希望遇到...
【jquery】给元素addClass并绑定点击事件，点击事件不生效的解决办法
qing_小诺的博客
09-19 3964
问题还原： 现有一个div，我们在点击时，把原来class给去掉，并给它添加一个新的class，然后监听这个新的class的点击事件，但是没生效。 代码如下： <body> <div class="open">展开</div> <script> $(".open").click(function () {//展...
动态加载的页面元素，点击事件不触发的解决办法
siguangsong的博客
02-28 1822
首先看一下 jQuery中： $(“元素”).click() 和 $(document).on(‘click’,‘元素’,function(){})的区别 $(“元素”).click(function(){}) 当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。 <body> <ul> <li>1</li> <li>2</li> <li>3
使用jQuery去给元素绑定事件时，无法给新创建的元素绑定事件的原因
zhkkky的博客
11-26 691
在我们使用jQuery库去撰写js代码的时候经常会遇到这种问题 ，比如说给某个元素绑定点击事件，原本写在文档中的元素都可以响应该事件，比如下面我点击所有的div，去修改他们的颜色。
jQuery给动态添加的元素绑定事件的方法
12-29
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下： jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要...
JQuery给元素绑定click事件多次执行的解决方法
01-19
原绑定方法： 代码如下: $(“#sdfsd”).on(“mouseout”,... 解决办法更改绑定方法为： 代码如下: $(“#sdfsd”).unbind(“click”).click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑
关于jquery中动态增加select,事件无效的快速解决方法
01-21
live方法其实是bind方法的变种，其基本功能就同bind方法的功能是一样的，都是为一个元素绑定某个事件，但是bind方法只能给当前存在的元素绑定事件，对于事后采用JS等方式新生成的元素无效，而live方法则正好弥补了...
HTML 入门
lvshihao_的博客
04-16 1000
全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
html2pdf,qrcode库及url参数拼接
m0_45093055的博客
04-16 427
html2pdf 是一个可以将 HTML 内容转换为 PDF 文件的库。它通常用于前端或服务器端，将网页或 HTML 字符串转换为可打印或可分享的 PDF 格式。这对于需要将网页内容保存为 PDF 或者生成报表等场景非常有用。text参数在qrcode库中不是直接表示页面路径，但你可以将页面路径（URL）作为文本内容传递给toDataURL函数来生成一个指向该页面的二维码。此篇文章主要是对html2pdf,qrcode库及url参数拼接的零散整理。
【HTML】制作一个简单的实时字体时钟
qq_70814008的博客
04-11 1644
整体上，这个网页应用程序通过HTML提供了页面结构，CSS赋予了页面美观的样式，而JavaScript则让页面具有动态更新和用户交互的能力。三者共同协作，实现了一个既美观又实用的动态时钟和日期时间转换工具。
高频前端面试题汇总之HTML篇
最新发布
qq_51685537的博客
04-18 461
不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是。
jq对页面加载完成后生成的新的id添加监听事件
05-31
可以使用jQuery的委托事件机制（也称为事件代理）来对页面上动态生成的元素添加监听事件。委托事件机制是将事件绑定到一个静态的父级元素上，在父级元素上捕获事件，然后根据实际触发事件的子元素动态执行事件处理函数。这样就可以避免在每个动态生成元素上单独绑定事件。 示例代码如下： ```javascript $(document).ready(function() { // 页面加载完成后执行的代码 // ... // 使用委托事件机制对动态生成的元素添加监听事件 $(document).on('click', '#parent-element', function(event) { // 判断实际触发事件的子元素是否匹配指定的选择器 if ($(event.target).is('#dynamic-element')) { // 执行事件处理函数 } }); }); ``` 其中，`#parent-element`是静态父级元素的选择器，`#dynamic-element`是需要绑定监听事件的动态生成元素的选择器。在事件处理函数中，可以使用`event.target`获取实际触发事件的子元素，然后使用`$(event.target).is('#dynamic-element')`判断该子元素是否匹配指定的选择器，如果匹配则执行相应的处理代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值