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()的用法一样,最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。
下一篇: 面试模拟题:人工智能会造成失业吗?