【jQuery】解决动态添加的元素绑定事件不生效的问题
最近做需求,碰到一个问题,动态新增的元素绑定的鼠标移入事件不生效。
尝试很多方法后解决,解决过程如下:
给动态元素绑定事件时使用的方法:
$("outerSelector").on("eventType","innerSelector",function(){});
比如:
$(".showThi").on('mouseover','li',function(){
var thiSelectText = $(this).text();
$(this).css("background","#FF8202");
$(this).siblings().css("background","#fff");
});
1、在使用on给动态添加的元素绑定事件时,outerSelector必须是原来就存在的元素。如下面的ul标签。
<div class="search-div mgt-30 mgb-30 tc word_addr">
<ul class="showThi"></ul>
</div>
2、innerSelector是追加的标签中的元素,我们例子中是li。
这样,动态增加的元素li就可以绑定鼠标移入事件mouseover了.