欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-27 17:10:08
...

标签:

<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()的用法一样,最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。

相关标签: js javascript