初始jquery事件-动态添加的新元素没有绑定上旧元素的事件

最新推荐文章于 2022-11-07 09:24:27 发布
原创 最新推荐文章于 2022-11-07 09:24:27 发布 · 230 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #js

初学者在使用jQuery时可能遇到新添加元素无法继承旧元素事件的问题。原因在于事件绑定是静态的，仅对现有DOM生效。解决办法是在生成新版本时，先解除原有事件绑定，再全局重新绑定，确保所有元素都有正确事件。注意，这样做可能导致旧元素重复绑定事件。理解这一机制有助于优化DOM操作和事件处理。

初学jquery的时候真的感觉很疑惑，明明增加的新元素的各方面都和旧元素是一样的，偏偏没有绑定上旧元素的事件。

启示：绑定事件是静态的，只能给当前的文档页面增加上事件，可以相当于说旧版本有，新版本的新元素没有（增加东西之后是新版本），需要自己去手动加上，但是手动给新版本的新元素加上事件之后，你会突然发现旧版本的旧元素绑定上了两个事件。

解决方式：每次生成新版本的时候，初始化一下，也就是将原有的旧版本绑定的事件给解绑一下，再一次全部性的给新版本的所有元素

【JQ】动态添加的元素无法触发绑定事件的解决办法
weixin_44707049的博客
10-02 1242
情景 如上面的模态框，点击左边的添加按钮，会把整个div添加到右边，点击右边的删除按钮，则把整个div添加回左边，就类似于穿梭框的样子。 不难，下面是一开始想到的方案： $('#SelectedDevice button').click(function(){ $(this).text('添加'); let this_device = $(this).parent().parent(); this_device.remove();//从待选设备框中移除 $('#DeviceToBeSelect
动态添加的元素不能绑定事件
PHP学习手记
06-08 419
今天在做项目是时候发现动态添加的元素不能绑定事件，由于本人js和jquery技术有限，所以也不知道原因，一查才知道，动态添加的元素绑定事件就会失效，所以修改了一下。jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8版本以后推荐使用on。 **定义和用法** on() 方法在被
jquery动态添加的元素没有绑定事件
陈熙之的博客
03-25 645
1.7版本使用on绑定的方式，只能对现有的元素生效，对动态加载的元素，必须使用live来绑定 定义和用法 live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。 $(function () { $(".upimgli").live("c...
jQuery动态添加元素无法触发绑定事件的解决方法分析
10-18
主要介绍了jQuery动态添加元素无法触发绑定事件的解决方法,结合实例形式分析了动态添加元素无法绑定事件的原因与相关解决方法,需要的朋友可以参考下
动态添加的新元素没有绑定旧元素的事件
Tansum
04-23 353
原来的绑定方式—————动态添加的新元素不会绑定原本定义的事件， $("[name='provinceCode']").change(function(){ //具体操作 }); 改成下面这种方式，原来的元素和动态添加的新元素都能绑定事件 $("#insertDataDiv tbody").on("change","[name='provinceCode']",function(){ //具体操作 }); 其中，$("#insertDataDivtbody")选择器是要绑定..
解决jQuery新增元素无法绑定事件的方法
qq_44540112的博客
01-16 4062
jQuery处理静态元素的方法 在写html时，我们往往想要通过JavaScript来为页面添加一些事件特效. 例如：我们想在点击某一元素（例如按钮等）来为网页添加新的元素，当你再想在你点击事件新增的元素中在绑定一个事件时往往会出现以下问题。 在写JS代码中我们常常用页面加载事件Window.onload事件来触发事件，但是触发的事件的元素有动态和静态之分。 动态元素写在你...
jQuery LiveQuery 插件实现动态元素事件绑定
jQuery LiveQuery 是一个基于 jQuery 框架开发的重要插件，主要用于解决在现代前端开发中动态添加到 DOM（文档对象模型）中的元素无法正常绑定事件的问题。随着 Web 应用的不断复杂化，尤其是单页应用（SPA）和异步...
JQuery实现表格动态增加行并对新行添加事件
10-25
- 在新行被添加后，我们需要确保已有的事件监听器能够正确地绑定到这些新元素上。可以使用jQuery的`on()`方法来实现事件委托，这样新添加的行也会继承事件处理函数。 - 示例代码中使用了`onclick`属性直接绑定事件...
JS实现为动态创建的元素添加事件操作示例
10-18
当页面元素是动态创建时，常规的事件绑定方式可能无法正常工作，因为这些新元素在页面加载时并不存在。本篇文章将详细介绍如何使用 JavaScript（包括原生 JavaScript 和 jQuery）为动态创建的元素添加事件。 1. **...
jquery1.10给新增元素绑定事件的方法
11-30
为了解决这个问题，jQuery引入了`.on()`方法，它提供了更灵活和高效的事件绑定方式，同时也支持对动态添加元素的事件处理。 `.on()`方法的基本语法如下： ```javascript .on(events, [selector], [data], handler)...
Jquery添加新元素时，无法给新元素添加事件问题
一小步一大步的博客
07-05 1352
当使用jquery动态添加元素时，无法给新元素添加事件，导致无法触发事件下面是我的jquery无法触发的的代码：$(function(){ //这里是动态添加元素 $(".add").click(function(){ var btn = "<button class='newBtn'>新按钮</button>"; $...
jQuery添加元素后不执行原有事件的方法
hermit_j的博客
11-21 956
我们先来看下我的错误代码 html： <table border="1" id="best"> <tr> <td> <button class="change">修改</button> </td> </tr> <tr> <td> <button class="del">删除</button..
JQuery 添加元素 jquery对象 ，删除元素 remove
qq_44952790的博客
04-23 912
JQuery 添加元素 jquery对象 ，删除元素 remove
解决 jQuery 动态新增节点无法触发 onclick 点击事件的问题
ZCF1024 的后宫
10-15 3260
     问题： 当我们在网页加载完成后， 使用 JQuery 给页面动态增加增加节点时， 会发现新增节点无法触发点击事件      处理： 使用 live() 或 on() 方法给新增节点添加点击事件    ！！！注意： live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。      所以 JQuery 1.9 后的版本请使用  on() 方法给元素添加点...
jquery 动态添加的元素，绑定的事件不生效
猎人在吃肉
11-07 2209
jquery 动态添加的元素，绑定的事件不生效
js动态新增元素，绑定事件不起作用失效问题
hgg923的专栏
03-25 2728
利用on绑定方法，如下代码（说明：.uploadImg是新增元素；） 核心重点：.sendList是页面一直存在的元素，这样才能给动态元素一直绑定事件； 终极办法：$('body').on('change',"动态元素选择器", function() {});（但是从性能角度，不推荐用body这种选择器） $('.sendList').on('change',".uploadImg", f...
为什么动态添加的元素无法绑定事件
咱们裸熊
07-12 771
    最近在学习用jquery制作一个to do list，运用store.js插件存储数据。每刷新一次页面都从storage里面重新读取一次数据，渲染在页面上。在给删除按钮绑定click事件后，发现只能删除一条DOM元素，每刷新一次页面只能删除一条DOM元素，后来经过网上搜索找到了原因：    绑定事件在页面加载完后就完成了，也就是每刷新一次页面，绑定就完成一次。但是如果页面没有刷新，但是st...
Jquery动态添加元素无法绑定事件
weixin_44172800的博客
04-26 320
Jquery动态添加元素无法绑定事件 通常我们使用jquery绑定事件时： $(function(){ $(.ss").click( function(){ window.location="/tourtravel1/order.jsp"; }); }); 如果我们添加的元素是jquery添加的动态元素应该： $(function(){ $(document).on('click',...
jquery动态添加元素无法触发绑定的事件的解决方案
偶尔一节
08-30 3178
先上我出错的代码: $(document).ready(function(){ 　　　　　　　　//这里是动态添加元素 $(".add").click(function(){ var btn = $("新按钮"); $("body")
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值