首页 > web前端 > js教程 > 对于动态添加的元素,如何正确地将 jQuery 的`live()`迁移到`on()`?

对于动态添加的元素,如何正确地将 jQuery 的`live()`迁移到`on()`?

Linda Hamilton
发布: 2024-12-16 05:22:10
原创
729 人浏览过

How to Correctly Migrate jQuery's `live()` to `on()` for Dynamically Added Elements?

在 jQuery 中从 live() 转换到 on():调试事件绑定

jQuery 的 live() 方法在 1.7 版本中面临弃用,需要切换到 on( )。虽然用 on() 替换 live() 理想情况下应该会产生类似的结果,但 on() 文档强调事件处理程序仅绑定到绑定时页面上当前选定的元素。

原始实现(live()):

$('select[name^="income_type_"]').live('change', function() {
    alert($(this).val());
});
登录后复制

替换(on()):

$('select[name^="income_type_"]').on('change', function() {
    alert($(this).val());
});
登录后复制

与 live() 的差异源于 on() 只绑定当前存在的元素,而不像 live() 附加事件的委托机制动态添加到 DOM 的元素的处理程序。

动态时正确使用 on()元素:

要使用 on() 维护动态添加元素的事件处理,事件处理程序必须绑定到绑定时页面上存在的父元素。这可以通过使用来实现:

$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});
登录后复制

或者,可以在元素层次结构中更紧密地应用事件委托以提高特异性。

jQuery 文档说明:

live() 文档明确指出,根据其后继者重写 live() 涉及将事件处理程序绑定到现有的元素:

$(document).on(events, selector, data, handler);  // jQuery 1.7+
登录后复制

以上是对于动态添加的元素,如何正确地将 jQuery 的`live()`迁移到`on()`?的详细内容。更多信息请关注PHP中文网其他相关文章!

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