首页 > web前端 > js教程 > 如何处理 jQuery 中动态添加元素的事件?

如何处理 jQuery 中动态添加元素的事件?

Patricia Arquette
发布: 2024-12-11 19:50:19
原创
673 人浏览过

How Can I Handle Events from Dynamically Added Elements in jQuery?

处理动态生成的元素触发的事件

将元素动态添加到 DOM 时,使用标准事件处理程序捕获这些元素触发的事件可能会出现问题。出现此问题的原因是在创建元素之前附加了事件处理程序,导致事件未被捕获。

jQuery 通过使用 .on() 方法(或 .delegate)提供了解决此问题的方法() 在旧版本中)。此方法允许您将事件处理委托给静态祖先元素,该元素在绑定处理程序时已经存在。这确保事件冒泡并可以被处理程序捕获。

在您的特定情况下,您可以修改代码以使用 .on() 方法,如下所示:

// jQuery 1.7 or above
$('#modal').on('keyup', 'input', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});
登录后复制

// jQuery 1.6 或更低版本

$('#modal').delegate('input', 'keyup', function()
{
    handler = $(this).val();
    name = $(this).attr('name');
});
登录后复制

通过将事件处理委托给 #modal 元素,该元素在事件处理程序运行时已经存在绑定,您可以捕获由该元素内动态生成的输入元素触发的事件。

以上是如何处理 jQuery 中动态添加元素的事件?的详细内容。更多信息请关注PHP中文网其他相关文章!

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