Question

我有一个ID为#list的列表，其中没有列表项。在我的jQuery脚本中，我有一个函数将#list中的HTML设置为一些列表项。

$('#list').click(function() {
    $('#list').html("<li> blah </li> <li> blooh </li>");
});

但之后，当我试图操纵$（＆＃39; #list li＆＃39;）时：

$('#list li').mouseenter(function() {
    this.style.backgroundColor = "red";
});

它似乎不起作用。有什么想法吗？

Answer 1

它不起作用，因为click处理程序仅应用于DOM中的事物。试试这个：

$('#list').delegate('li','click',function(){
   this.style.backgroundColor = "red";
});

Delegate将绑定DOM中尚不存在的元素。

Answer 2

如果使用jQuery v1.7 +，请在其委派的表单中使用.on()，如：

$('#list').click(function () {
    $('#list').html("<li> blah </li> <li> blooh </li>");
}).on("mouseenter", "li", function () {
    this.style.backgroundColor = "red";
}).on("mouseleave", "li", function () {
    this.style.backgroundColor = "white";
});

<强> JSFIDDLE

注意您可以链接事件

jQuery操作临时元素

2 个答案: