jquery - li を ul に動的に追加するときにマウスオーバーが機能しない

Question

zhujy_8833 がこのページに投稿したコードに従いました。jQuery は hover で背景を変更します。

そのままでも問題なく動作しますが、jQueryを使用してliをulに動的に追加すると。私のマウスオーバーはliで発火しません。データベースから取得したデータをループして、次のように ul に追加しています。

HTMLには次のものがあります：

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

ul を入力するための JQuery:

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

これについて私を助けてくれませんか。どうもありがとう。