作者:mobiledu2502937927 | 来源:互联网 | 2022-09-19 09:31
jQuery live()方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效。
这个方法可以看做是 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说:
可以给这个元素绑定一个简单的click事件:
代码如下:
$('.clickme').bind('click', function() { alert(www.jb51.net); });
当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。
代码如下:
$('body').append('
Another target
');
尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。
但live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:
代码如下:
$('.clickme').live('click', function() { alert("www.jb51.net"); });
这样点击新增的元素,它依然能够触发事件处理函数。
事件委托
live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。
在我们的例子中,当点击新的元素后,会依次发生下列步骤:
1、生成一个click事件传递给
来处理。
2、由于没有事件处理函数直接绑定在
上,所以事件冒泡到DOM树上。
3、事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。
4、执行由 .live() 绑定的特殊的 click 事件处理函数。
5、这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。
6、这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
7、如果找到了匹配的元素,那么调用原始的事件处理函数。
8、由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。
以上就是对jQuery向动态生成的内容添加事件响应jQuery live()方法的详细介绍,希望对大家的学习有所帮助。
推荐阅读
-
前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ...
[详细]
蜡笔小新 2024-12-27 15:19:01
-
在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ...
[详细]
蜡笔小新 2024-12-26 15:57:00
-
-
HTML很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这篇文章中,我收集了10个超有用的HTML代码片段,有HTML5启动模板、空白图片、打电话和发短信、自动完 ...
[详细]
蜡笔小新 2024-12-23 15:26:50
-
本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ...
[详细]
蜡笔小新 2024-12-23 10:09:44
-
本文探讨了如何利用jQuery在客户端实现页面跳转,并详细介绍了如何确保页面在浏览器的顶层窗口中打开,而不是局限于当前框架内。 ...
[详细]
蜡笔小新 2024-12-23 03:35:09
-
本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ...
[详细]
蜡笔小新 2024-12-22 11:07:54
-
js中恢复原始值的代码怎么写(js中恢复原始值的代码怎么写) ...
[详细]
蜡笔小新 2024-12-22 09:26:57
-
在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ...
[详细]
蜡笔小新 2024-12-21 18:39:23
-
本文介绍如何使用 JavaScript 实现图片延迟加载,从而显著提升网页的加载速度和用户体验。 ...
[详细]
蜡笔小新 2024-12-21 18:21:55
-
本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中,将行标题字段呈现为锚点(即可点击链接),帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释,即使是新手也能轻松掌握。 ...
[详细]
蜡笔小新 2024-12-21 17:07:41
-
本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ...
[详细]
蜡笔小新 2024-12-20 21:22:27
-
本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ...
[详细]
蜡笔小新 2024-12-20 20:02:31
-
本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ...
[详细]
蜡笔小新 2024-12-20 18:30:59
-
预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ...
[详细]
蜡笔小新 2024-12-20 09:57:07
-
本文提供了多种方法来计算给定年份和月份的起始日和结束日,并进一步探讨了如何根据年、月、周获取特定周的起始日和结束日。 ...
[详细]
蜡笔小新 2024-12-19 20:17:53
-
mobiledu2502937927
这个家伙很懒,什么也没留下!