【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了.