mouseover не работает при добавлении динамически li к ul

Question

Я следил за кодом, который zhujy_8833 опубликовал на этой странице, jQuery changing background on hover.

Он работает нормально, как есть, но когда я динамически добавляю li в ul, используя jQuery. Наведение мыши не срабатывает. Я зацикливание над некоторыми данными, которые я тянуть из моей базы данных и присоединять их к улям следующим образом:

В HTML у меня есть:

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

JQuery для populaing ЛУ:

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" 
    }); 
});