【jQuery】解决动态添加的元素绑定事件不生效的问题

AB君 2018-11-30

最近做需求,碰到一个问题,动态新增的元素绑定的鼠标移入事件不生效。

尝试很多方法后解决,解决过程如下:

给动态元素绑定事件时使用的方法:

$("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了.

相关推荐