js/jq 动态添加的元素不能触发绑定事件解决方案

最新推荐文章于 2022-11-23 14:27:08 发布
最新推荐文章于 2022-11-23 14:27:08 发布
阅读量1.4k 收藏
点赞数 2
分类专栏： ▼ 前端 - Web 　　● js/jQuery/Swiper/easyUI 文章标签： js事件绑定 
<!-- 
    Copyright 2017-10-27, Jachin
    QQ: 381558301 
    Email: 381558301@qq.com

    请看看你们的版本并对号入座：
    jquery1.6版本以下都不支持on委托事件
    jquery1.3 至 jQuery1.8版都支持live委托事件
    jquery1.9 以后的版本不支持live委托事件,但是on事件可以替代live
 -->

jquery1.3版本以下的（不包括jquery1.3），是时候更新你的jquery版本了。因为 无解无解无解无解无解无解

如果jquery版本是在1.3-1.8之间的话，js/jq动态添加的元素触发绑定事件的解决方法（不建议用on事件，因为1.6版本以下不支持on事件，会报错）

click例子
$('element').live('click',function(){})
element可以是动态生成的元素，可以是它的类或者id

如果jquery版本是在1.9或者更高的话，live委托事件是被移除的，通过on来实现。js/jq动态添加的元素触发绑定事件的解决方法

注意注意：如果页面同时存在低版本的jq（1.3-1.8）和高版本jq（jquery1.9以上）的话，live委托事件会被高版本移除，最后导致虽然有jquery版本是在1.3-1.8之间，使用了live事件，页面会报错。

click例子
$('父元素').on('click', '子元素', function(){})

此时动态加载出来的元素一定要在$(‘父元素’)里面，否则绑定事件失效。换句话说，本应该绑定A元素，但是A元素是动态生成的，所以jq应该获取A元素的父元素来监听A元素是否发生click事件。 
举个例子

<!DOCTYPE html>
<html>
<head>
    <title>js/jq 动态添加的元素不能触发绑定事件解决方案</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script><body>
<button>添加a标签</button>
<div class="a-Box">
    <a href="javascript:;" class="alt">My name is</a><br>
</div>
</body>
</html>
<script type="text/javascript">
    $('.a-Box').on('click', 'a', function(){
        alert('Jachin');
    })
    $('button').click(function(){
        $('div').append('<a href="javascript:;" class="alt">My name is</a><br>');
    })
</script>

这样就可以完美解决动态加载出来的元素无法被监听。

最后附上个版本的jquery

<script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.2.6/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.3.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.5.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.6.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

文章转载于: https://blog.youkuaiyun.com/qq_35129893/article/details/78363211

版权声明：博客对我来说是记忆的笔记和知识的分享~非常感谢博客大神的帮助，若有无意侵权，请您联系我，谢谢  https://blog.youkuaiyun.com/qq_36698956

前端js中动态添加的元素不能触发绑定事件解决方法
qq_39736055的博客
02-09 1063
问题描述：在页面选择关键词时，需要将关键词元素绑定点击事件使同一类型的关键词只有一个固定class，使其随点击更换，目的是为了让这一类型的关键词的值可以由class获取。在原本写死的关键词上绑定的事件是可用的，但是换成动态加载后发现只能适用于写死的情况。 参考文章： https://blog.youkuaiyun.com/y753951258/article/details/80497252 https://...
【JQ】动态添加的元素无法触发绑定事件的解决办法
weixin_44707049的博客
10-02 1229
情景 如上面的模态框，点击左边的添加按钮，会把整个div添加到右边，点击右边的删除按钮，则把整个div添加回左边，就类似于穿梭框的样子。 不难，下面是一开始想到的方案： $('#SelectedDevice button').click(function(){ $(this).text('添加'); let this_device = $(this).parent().parent(); this_device.remove();//从待选设备框中移除 $('#DeviceToBeSelect
关于js中无法绑定点击事件
weixin_57742552的博客
06-28 866
在js文件中添加点击事件失败，但是HTML中onclick就能成功。 解决办法：将js的引用的script标签放到</body＞的后面。这样在页面渲染之后再执行js代码。
原生js 之 (DOM操作）
m0_49515138的博客
11-23 2307
Element.classList.add (“类名”) // 添加类名操作 可添加多个 不会覆盖原有的类名。Element.classList.remove( “ 移除类名”) // 移除类名操作 可移除多个类名。Element.classList.toggle( “切换类名 ”) //切换类名 无则添加，有则移除。(false为捕获阶段，true为冒泡阶段)但是有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）
为什么 vue.js存在某些情况下 v-model绑定数据不实时更新呢?
热门推荐
时光从指尖划过的博客
09-20 1万+
最近做项目多次出现这个问题，尝试多次解决了，浪费挺多时间，写出来给有这类问题的朋友一个参考。问题再给vue data中object类型数据赋值时存在不实时显示的情况解决方法：见Vue.js中文官网->进阶->深入响应式原理->变化检测问题 受现代 JavaScript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对
关于js动态加载html元素，html中绑定的click事件不生效的解决办法
卫可冬的博客
12-23 4639
出现这种情况，其实是不清楚js事件委托的原理，就是指未来还不清楚会创建多少个节点,所以暂时没办法直接给他们注册事件。 因为javascript在dom载入之前，就已经把js加载了。 比如： js动态加载如下标签： <button id="query">查询</button> js中的绑定事件如下： $("#query").click(function () { ...
jquery动态添加元素事件失效问题解决方法
10-25
jQuery提供了多种解决方案来处理动态添加元素的事件绑定问题。其中，`live()`方法曾经是一个常用的解决办法，它允许在页面上已经存在或未来可能出现的元素上绑定事件。然而，`live()`自jQuery 1.7版本后逐渐被废弃，...
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
10-23
`.on()`可以将事件绑定到静态父元素，这样即使子元素是动态添加的，事件也会正确地冒泡到父元素并触发处理程序。例如： ```javascript $("#ulLabel").on('click','.liLabel', function(){ alert('OK'); }); ``` ...
JQuery给元素绑定click事件多次执行的解决方法
10-25
然而，在编程过程中，我们可能会遇到一个问题，即元素的`click`事件被多次绑定，导致点击时事件处理函数被执行多次，这通常是由于多次调用事件绑定代码或动态添加元素时没有正确处理事件引起的。本文将深入探讨这个...
鼠标经过子元素触发mouseout，mouseover事件的解决方案
09-03
在JavaScript和jQuery中，处理鼠标事件时，经常会出现因元素嵌套导致的事件冒泡问题。标题提到的问题是，当鼠标经过子元素时，意外触发了父元素的`mouseout`和`mouseover`事件，从而影响了预期的效果。下面将详细...
jquery绑定事件不生效的解决方法
12-10
如果不愿意使用文档就绪事件，另一种解决方案是将引用的JavaScript文件放在HTML文件的底部，即`</body>`标签之前。这样可以确保当JavaScript代码运行时，所有DOM元素都已经创建。在问题描述的第二个方法中，推荐的...
JS动态添加元素后事件不起作用失效
qq_51554120的博客
07-20 3844
2、同样，当你使用类似于varaa=document.getElementsByTagName(“动态生成的元素”);来获取动态生成的元素的时候也是获取不到的，因为网页只会执行一次初始化绑定，之后动态生成的dom元素也是监测不到的。1、onclick事件绑定只对dom中存在的元素有效，对于我们后来动态增加的元素是监测不到，所以绑定不了。jQuery事件委托。...
js 添加 html 元素绑定事件无效,js动态加载HTML元素时出现的无效的点击事件
weixin_33941707的博客
06-03 687
项目中列表数据中隐藏着详情数据，图一：详情数据是：根据当前行的数据作为参数，通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面图二：js文件中的这些js的点击事件无效：js代码：// 推荐商家点击标题展开与收起$('.toggle-tag').on('click', function(){var ele = $(this).parents('tr').next().find('...
js 新追加的元素点击事件没触发
qq_44647223的博客
12-15 1173
常见情况： 监听html中某个类的元素的点击事件，当新追加同一个类的元素时，点击新追加的元素没有反应。 例如： <!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> .divs{ height: 100px; width: 100px; background-color: red; margin: 20px;
关于js中绑定事件失效问题
a810373329的博客
05-02 9813
相信很多开始学习前端开发的朋友都发生过绑定事件失效的问题，那么究竟是什么原因使得事件失效呢？ 这里作者以jquery库编写作为例子。 第一种：直接失效。 &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt; &lt;script type=
解决使用JQuery或JS动态添加的元素无法绑定事件的问题
地铁和人海
02-18 3785
在一个HTML中动态的添加一个元素，常用有两种方法：一个是js方法，一个是jquery方法。 他们都有的问题是动态创建的元素无法绑定已经写好的脚本。 也就是说，假如你为所有的按钮都绑定一个点击事件，当你新创建一个按钮，这个按钮却没有绑定点击事件。 这个跟用什么写的脚本无关，而是因为动态添加元素之前，页面和js已经加载完毕。事件也已经绑定了，而动态添加的新元素没有被绑定，所以也就响应不了请求。 ——...
jq gei 没有的元素绑定事件
最新发布
08-27
<think>首先，用户的问题是：“我想查找使用jQuery为不存在的元素绑定事件的方法 请问jQuery为不存在的元素绑定事件的方法”。这看起来是关于jQuery中如何为尚未存在的元素（如动态添加的元素）绑定事件。 从系统级指令中，我需要： - 使用中文回答。 - 结构清晰，逐步解决问题。 - 确保回答真实可靠。 - 在引用的段落末尾添加引用标识。 - 生成相关问题。 - 对于数学表达式，使用指定的LaTeX格式（但在这个上下文中可能不相关，因为主题是jQuery）。 参考的站内引用： - [^1]: 关于解决jQuery新增元素无法绑定事件的问题，提到了动态元素和静态元素的区别。 - [^2]: 讨论了jQuery绑定事件的几种方法，包括.on()方法。 - [^3]: 提到了使用delegate()方法来解决事件绑定问题。 - [^4]: 提到了为未来元素绑定事件。 这些引用都指向同一个主题：使用jQuery为动态添加的元素绑定事件。核心方法是使用事件委托，如.on()方法或.delegate()方法。 关键概念： - 事件委托：将事件处理程序绑定到一个父元素上，然后根据事件目标来触发处理程序。这允许处理动态添加的子元素的事件。 - 在jQuery中，.on()方法是推荐的方式，因为它可以用于事件委托。 回答结构： 1. 解释问题：为什么动态添加的元素无法直接绑定事件。 2. 介绍解决方案：使用事件委托。 3. 详细说明如何使用.on()方法。 4. 提供代码示例。 5. 讨论其他方法（如.delegate()，但.on()是现代的）。 6. 添加引用标识。 7. 生成相关问题。 逐步回答： - 步骤1：解释问题。当元素被动态添加时，直接绑定事件（如.click()）不起作用，因为事件处理程序在页面加载时绑定，而新元素不存在。 - 步骤2：引入事件委托。事件委托允许将事件处理程序绑定到一个静态父元素上。 - 步骤3：使用.on()方法。语法：$(parentSelector).on(event, childSelector, handler)。 - 步骤4：代码示例。例如，为一个动态添加的按钮绑定点击事件。 - 步骤5：引用相关部分。在解释时添加引用标识。 - 步骤6：生成相关问题。 确保回答真实可靠：基于jQuery文档和常见实践。 最终输出格式： - 使用中文。 - 清晰结构。 - 代码块使用Markdown格式。 - 末尾生成相关问题。</think>### jQuery为不存在的元素绑定事件的方法 在jQuery中，为动态添加的元素（即“不存在的元素”）绑定事件时，直接使用传统方法（如`.click()`或`.bind()`）会失效，因为这些方法只在页面初始加载时绑定事件。当新元素被添加后，事件处理程序无法自动关联。解决这一问题的核心方法是使用**事件委托（Event Delegation）**，通过将事件处理程序绑定到一个静态父元素上，根据事件目标来触发子元素的事件。以下是详细步骤和解释： #### 1. **问题原因分析** - 传统绑定方法（如`$('button').click(...)`）只适用于页面加载时已存在的元素。动态添加的元素在DOM中不存在于初始绑定阶段，因此事件无法生效[^1]。 - 例如，以下代码无法为动态按钮绑定点击事件： ```javascript // 错误示例：新增元素无法触发事件 $('#container').append('<button class="btn">点击我</button>'); $('.btn').click(function() { alert('事件未触发!'); }); ``` #### 2. **解决方案：使用事件委托** - jQuery提供了`.on()`方法实现事件委托，语法为： ```javascript $(staticParent).on(eventName, childSelector, handlerFunction); ``` - `staticParent`：一个静态的父元素选择器（如`document`或`#container`），它在页面加载时已存在。 - `eventName`：事件类型（如`'click'`）。 - `childSelector`：动态子元素的选择器（如`'.btn'`）。 - `handlerFunction`：事件处理函数。 - **原理**：事件冒泡到父元素时，jQuery检查事件目标是否匹配`childSelector`，如果匹配则执行处理函数[^2][^3]。 #### 3. **正确代码示例** 以下是为动态按钮绑定点击事件的完整示例： ```html <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="container"></div> <button id="addBtn">添加新按钮</button> <script> // 为"添加新按钮"绑定事件，动态插入元素 $('#addBtn').click(function() { $('#container').append('<button class="dynamic-btn">动态按钮</button>'); }); // 事件委托：为所有.dynamic-btn元素绑定点击事件（包括未来添加的） $(document).on('click', '.dynamic-btn', function() { alert('事件成功触发!'); }); </script> </body> </html> ``` - **说明**：这里使用`document`作为静态父元素，确保所有`.dynamic-btn`元素（无论何时添加）都能触发事件[^3][^4]。 #### 4. **其他方法与注意事项** - **`.delegate()`方法**：这是旧版jQuery的替代方案，语法类似，但`.on()`是更现代的推荐方式： ```javascript $('#container').delegate('.dynamic-btn', 'click', function() { ... }); ``` - **优化建议**： - 避免使用`document`作为父元素，选择最近的静态容器（如`#container`）以提高性能。 - 确保子元素选择器唯一，避免误触发其他元素。 - 常见错误：如果父元素也是动态的，事件委托会失效。因此父元素必须是页面加载时存在的静态元素[^1][^3]。 #### 5. **总结** 事件委托通过`.on()`方法解决了动态元素事件绑定问题，其核心是将事件监听提升到父层级。这种方法高效且兼容所有jQuery版本，适用于频繁添加/移除元素的场景（如表单动态行、AJAX加载内容等）[^2][^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值