mouseover無法動態添加到ul

Question

我跟着zhujy_8833張貼在這個頁面上的代碼，jQuery changing background on hover。

它工作正常，但當我動態地將li添加到使用jQuery的ul中。我的鼠標懸停在李不開火。 我遍歷一些數據，我從數據庫中提取其附加在UL如下：

在HTML我有：

<div id="result-holder"> 
    <ul id="results-list"> 
    </ul> 
</div> 

JQuery的爲populaing的UL：

for (var i=0; i<data.length; i++){ 
    // #results-list is the ul id 
    $('#results-list').append("<li class='lineInc' id='lineInc_"+i+"'>" + data[i] + "</li>"); 
} 

試圖改變li背景顏色使用

$(document).ready(function(){ 
    $(".lineInc").mouseover(function(){ 
      $(this).addClass("hover")  //hover, add class "hover" 
    }); 
    $(".lineInc").mouseout(function(){ 
      $(this).removeClass("hover"); //hover out, remove class "hover" 
    }); 
}); 

CSS

ul#results-list .lineInc.hover{ 
     cursor:pointer; 
     background:#900; 
} 

而且，我想這個CSS，但仍然沒有工作

ul#results-list li.hover{ 
     cursor:pointer; 
     background:#900; 
} 

能否請您幫助我在此。非常感謝。

Answer 1

使用jquery on

$(document).ready(function(){ 
    $("#results-list").on("mouseover", ".lineInc" ,function(){ 
      $(this).addClass("hover")  //hover, add class "hover" 
    }); 
    $("#results-list").on("mouseout", ".lineInc",function(){ 
      $(this).removeClass("hover"); //hover out, remove class "hover" 
    }); 
});