jQuery 为动态追加的元素添加点击事件

最新推荐文章于 2025-06-25 11:21:10 发布
原创 最新推荐文章于 2025-06-25 11:21:10 发布 · 1.4w 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍jQuery从1.7版本开始，用on()方法替代live()、bind()和delegate()方法，实现更高效的事件处理，尤其适用于动态添加的元素。on()方法确保事件监听器可以应用于现有和未来通过JS脚本添加的元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在 jquery1.7 之前的版本中用的是 live()方法,但是 live() 方法在 1.7 中已经不建议使用,1.9 中已经删除了这个方法.

live() 方法适用于匹配选择器的当前及未来的元素 (例如用 JS 脚本创建的新元素）

自 jquery1.7 版本起，on() 方法是 bind() / live() / delegate() 方法的新的替代方法

on() 方法添加的事件处理程序适用于当前及未来的元素（比如由 JS 脚本创建的新元素）

使用示例

 $("#xx").on("click",".add-html",function(){

 });

on() 前面的这个 #xx一定要是 html 中存在的，静态的,否则点击事件触发不了, ".add-html" 是动态加载出来的内容,它的 class=".add-html"

on() 方法在任何条件下都是成立的.
 

jQuery为动态生成的select元素添加事件的方法
10-21
8. 总结：通过使用jQuery的事件委托技术，开发者可以有效地为动态生成的元素添加事件处理器。这种方式不仅节省了资源，还提高了代码的效率和可维护性。在实际开发中，这种方法被广泛应用于各种需要动态内容更新的...
Jquery 动态添加元素并添加点击事件实现过程解析
10-16
本解析主要介绍如何利用jQuery动态添加元素，并为这些元素绑定点击事件处理器。同时，也会对事件冒泡和事件捕获这两种事件传播方式做一定的说明。 首先，我们来理解一下jQuery中动态添加元素的概念。jQuery提供了一...
jQuery给动态添加的元素绑定事件的方法
12-29
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下： jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8版本以后推荐使用on。这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 <div id=testdiv> <ul></ul> </div> 需要给<ul>里面动态添加的<li>标签添加click事件   jquery 1.7版以前使用live
jquery 新建的元素事件绑定问题(上)
winneryj的博客
12-02 155
demo:http://www.cnjquery.com/demo/jquery页面加载完成后元素绑定事件.html 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件，但又新增加的元素上却没有绑定任何事件。 js的事件监听跟css不一样，css只要设定好了样式，不论是原来就有的还是新添加的，都有一样的表现。而事件监听不是，你必须给每一个元素单独绑定事件。...
jQuery - 添加元素
最新发布
likuoelie的博客
06-25 1075
jQuery 是一种流行的 JavaScript 库，旨在简化网页开发的 DOM（文档对象模型）操作。添加元素是 jQuery 的核心功能之一，允许开发者动态向网页中插入新内容。根据超详细的jQuery的 DOM操作，一篇就足够！- 知乎的内容，jQuery 的 DOM 操作涵盖了属性操作、内容操作、样式操作等多个方面，其中添加元素是常见需求。从jQuery 添加元素 - w3school.com.cn的内容来看，jQuery 提供了多种方法来添加新元素，包括内部添加（如append()和。
jquery动态追加的元素添加点击事件，（如果点击事件失效...）
qq_38687592的博客
07-12 767
在jQuery中，如果你动态追加的元素上的事件失效，那么很可能是因为你在元素还未被添加到DOM中就绑定了事件。解决这个问题的方法是使用事件委托，事件委托可以在不直接绑定到每个元素的情况下，为未来可能会添加到DOM中的元素添加事件监听器。on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，可以放在on的第二个参数里面，jquery追加的标签,标签事件失效。
jQuery给动态生成的元素添加事件
草木黄尘
07-13 7317
有时需要向页面内动态添加元素，其中可能还需要给这些追加的元素绑定事件，这时候采用jquery是很方便的。 1、采用live()方法（该方法与1.4版本后废弃）： live()方法可以给所有元素附加一个事件处理函数，甚至包含动态添加的元素，其采用事件委托的处理方式，事件委托的原理是（如点击元素）： 点击某个元素，因为该元素并未绑定任何事件处理函数，事件由DOM树冒泡到绑定了特殊事件处理函数的上层
jQuery的.bind()、.live()和.delegate()之间区别
weixin_30339457的博客
06-07 192
DOM树 首先，可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子： 事件冒泡(又称事件传播) 当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。 1 $('a').bind('click',function(){alert('that tickles!')...
解决jQuery使用append添加的元素事件无效的问题
10-18
例如，如果你有一个`#zkdiv`元素，并且要在其中动态添加带有`zk`类的按钮，并为这些按钮绑定点击事件，可以这样做： ```javascript $("#zkdiv").on("click", ".zk", function() { console.log("on 点击一次"); }); ...
jQuery为DOM动态追加事件的方法
10-20
代码修改为：`$(".table").on("click", ".btn-open", function(){...})`，这样无论`.btn-open`元素何时被添加到`.table`中，点击事件都可以被正确捕获和处理。 4. 如果父元素`.table`在`document.ready()`时也不...
jquery如何给动态生成的页面元素添加事件
瞌睡猴儿的大果树
07-11 345
jquery如何给动态生成的页面元素添加事件 示例 $("body").on("click","input[name='abc']",function(){ alert("这个新生成的input被点击了~~") }); $(“第一个被选中的元素是准备绑定事件的父级元素（不是必须body）”).on(“事件”，“选中动态元素元素”，function(){ 方法体 })； 所以上方代码的意思是在...
jQuery给动态创建的元素添加事件
u012928016的博客
04-14 423
如果要给一个还未创建的HTML元素添加事件时，可以使用jQuery的on方法，如： 先定义好事件： $(document).on('click', '#heheda', function(e) { alert('呵呵哒');}); 此时span元素被创建 $("div").append("呵呵哒"); 点击时发现，该元素的点击事件能够被触发
JQuery给动态添加的元素绑定事件的方法
qiudechao1的博客
11-08 2202
今天有位墨初VIP主题的使用者，给我反馈了一个主题中的BUG。就是主题的评论滑块在回复的时候，无法滑动（当然这个问题已经修复），回来经过反复的查找，终于确定了，在评论回复自动创建的DIV元素中，无法绑定JQ事件，也就是说js无法监听到动态创建出来的元素，无法给他们绑定事件。 下面就说一说，如何给动态创建的元素添加绑定事件。 JQ中live()的方法 在JQ1.7版本以前，有个live（）...
jQuery中对动态添加的元素绑定事件
weixin_66990569的博客
10-29 4670
在对元素绑定事件时可能会出现没有效果的情况，这个时候就需要考虑，你绑定的元素是否是动态添加的，动态数据也就是使用jQuery添加的数据，下面就是针对动态数据绑定事件的解决方法；
jQuery-为动态添加的元素绑定事件
热门推荐
H小志
08-11 7万+
在使用jquery的方式为元素绑定事件时，我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件。像需要用ajax的方式请求远程数据来动态添加页面元素时，显然以上几种绑定事件的方式是无效的。$("#searchMoveVideoResult ul li").bind("click",function(){ $(this).css("border","5px solid #000
jQuery -- 如何为动态添加的元素绑定事件处理函数
magento网站建设，magento模板开发，magento支付模块
09-03 1万+
<br />有一段时间没用jquery了，今天又碰到这个问题。当时是知道有livejquery可以解决。但是我并不喜欢为了这个而另外加载一个。我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。<br /> <br />参考：http://api.jquery.com/live/<br /> <br />以前我们定义事件，比如为元素定义单击事件是这样写的：<br /> <br />$('input').click(function () {
JQuery 使用技巧（二）: 为动态添加的子元素添加点击事件
一只奋斗的猪
11-23 6203
现在有这样的一个需求：动态生成列表（使用的是 `ul`），并且每一项（`li`）里面都有一个 “`详情`” 按钮，现在需要实现点击按钮，然后弹窗并通过 `id` 显示详情。 1. JS 原生：每个按钮都添加一个 onclick 2. JQuery：通过 on 添加事件监听. `JQuery` 提供的 `click` 函数只能为 `document` 初始化完成前已经存在的元素添加点击事件。这个时候可以通过使用 `on` 函数来注册事件
jQuery为动态创建的元素添加事件-注意点
weixin_42860747的博客
03-09 280
举个栗子 <ul> <li><div class = "box"></div></li> <li><div class = "box"></div></li> <li><div class = "box"></div></li> </ul> 要求是：在点击div后进行一些操作，其中小li时可以动态添加的 下面是错误写法 $(ul li
JQ动态加载点击事件
qq_44948614的博客
05-26 432
$('页面中存在的父元素').on('click','需要添加点击事件的元素', function () { console.log('点了一下') }) on()之前的选择器必须存在于页面 on()参数里的元素可以反复删除添加 $('.blog').on('click','.keyword_btn', function () { console.log('点了一下') keyword = $(this).text()
jQuery动态追加图片与事件委托实战
这篇文章详细讲解了如何使用 jQuery 实现动态追加图片，通过事件委托管理不同阶段的交互，并确保对新添加元素的事件处理不会重复编写。通过这种方式，页面能够保持高效和简洁，同时提供良好的用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值