js或jq动态创建标签，绑定的blur、click、hover等事件失效完美解决方案

yc99

于 2020-08-18 17:10:40 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/gjsiaifa/article/details/108081961

js 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了在使用jQuery时，如何正确地为动态创建的元素绑定事件。传统的事件绑定方法仅适用于页面加载时已存在的元素，而$(document).on()方法则可以解决动态元素的事件绑定问题，确保所有符合选择器条件的元素都能响应事件。

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

标签：

<div class="inBox">
    <input class="nr" type="text">
</div>
<span class="jia">添加标签</span>

绑定事件：

//动态创建一些.nr
$('.jia').click(function () {
	$(this).siblings('.inBox').append('<input class="nr" type="text">')
})
//这样绑定只会绑定在页面中初始存在的标签
$('.nr').blur(function (e) { 
	e.preventDefault();
	console.log($(this).index());
});

$(选择器).event(fn)
当选中的选择器被事件时触发回调函数fn。只针对与页面已存在的选择器。
后面动态创建的标签，没法进行事件触发。

正确的方法：

$(document).on("blur",".nr",function(e){
    e.preventDefault();
	console.log($(this).index());
});

$(document).on(event,‘要选择的元素’,function(){})

on方法包含很多事件，点击，双击等等事件。和$().event()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。