首页 > web前端 > js教程 > 如何处理动态加载的 HTML 元素上的点击事件:'.live()”与'.on()”?

如何处理动态加载的 HTML 元素上的点击事件:'.live()”与'.on()”?

DDD
发布: 2024-12-18 10:28:22
原创
141 人浏览过

How to Handle Click Events on Dynamically Loaded HTML Elements: `.live()` vs. `.on()`?

动态加载 HTML 的事件处理:.live() 与 .on()

当使用动态加载的 HTML 时,它变成对于处理最初不存在的元素的事件至关重要。已弃用的 .live() 方法及其推荐的替代方法 .on() 提供了解决此挑战的不同方法。

原始问题表达了使用 $('#parent 动态添加的元素注册点击事件的困难').load("http://...").虽然 .click() 无法捕获事件,但 .live() 可以工作,但已被弃用。

解决方案在于使用 .on() 进行委托事件处理。不要将事件直接附加到动态加载的元素 (#child),而是使用与子元素匹配的选择器将其绑定到父元素 (#parent)。这种方法确保即使 #child 在 load() 操作之后创建,它也会继承其父级上设置的事件处理程序。

此场景的推荐语法是:

$('#parent').on("click", "#child", function() {});
登录后复制

以这种方式,点击事件侦听器将附加到#parent,并且任何源自#child的点击都将被事件处理程序捕获和处理,即使当父级最初创建时#child可能不存在已创建。

以上是如何处理动态加载的 HTML 元素上的点击事件:'.live()”与'.on()”?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板