jquery - 将 li 动态附加到 ul 时，鼠标悬停不起作用

Question

我遵循了 zhujy_8833 在此页面上发布的代码，jQuery changed background on 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;
}

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

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