jquery - mouseover not working when appending dynamically li to ul -

i followed code zhujy_8833 posted on page, jquery changing background on hover.

it works fine when dynamically append li ul using jquery. mouseover doesn't fire on li. looping on data pull database , append them ul follow:

in html have:

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

jquery populaing ul:

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

trying change li background color using

$(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; } 

also, tried css still not working

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

can please me on this. many thanks.

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