0

我有这个代码 

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

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

4

2 回答 2

6

该事件mouseover不会触发，因为加载时页面上不存在该元素......所以你需要这样做：

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

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

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

#badge td:hover {
   color: red;
}

谢谢@WTK：

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

于 2012-08-07T09:54:53.490 回答
1

尝试使用liveoron因为您的元素是动态加载的。基本上，这些函数的作用是允许您将事件处理程序附加到未来的元素。像这样使用它：

$("td").on('mouseover', function(){
    $(this).css({'color':'#F00'})
});
于 2012-08-07T09:59:24.300 回答