将动态li附加到ul时,mouseover无法正常工作

Question

我按照zhujy_8833在此页面上发布的代码,jQuery在悬停时更改背景.

它工作正常,但是当我使用jQuery动态地将li附加到ul时.我的鼠标悬停不会对李开火.我正在循环我从数据库中提取的一些数据并将它们附加到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;
}

你能帮我解决这个问题吗？非常感谢.

Answer 1

使用jquery

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