jQuery添加新元素

Question

我有这个代码

$.getJSON('check.php', function(data) {
    $.each(data, function(key, val) {  
        $("#badge").append("<tr><td>"+val+"</td></tr><tr><td>-------------------------------------------------------</td></tr>");
    });
});

$("td").mouseover(function () {
    $(this).css("color","red");
});

我的问题是，当我将鼠标指针悬停在每个元素上时，它们将不会像我期望的那样改变颜色……有人可以解释我为什么吗？？？ 并帮助我做正确的事。

Answer 1

由于在加载时页面上不存在该元素，因此不会触发事件mouseover ，因此您需要执行以下操作：

$("#badge").on('mouseover','td', function () {
    $(this).css("color","red");
});

on()函数将在badge元素（这是我猜中的表）上触发，并且仅在事件目标为td且事件为mouseover时触发。

不过要注意一件事-这可以通过CSS轻松完成：

#badge td:hover {
   color: red;
}

谢谢@WTK：

请记住， on()从jQuery 1.7开始可用。 对于较旧版本的jQuery和类似结果，请使用bind() ， delegate()或live() 。

Answer 2

由于您的元素是动态加载的on因此请尝试live使用。 这些功能基本上是允许您将事件处理程序附加到将来的元素上。 像这样使用它：

$("td").on('mouseover', function(){
    $(this).css({'color':'#F00'})
});