Question

i have this code

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

my problem is when i hover my mouse cursor on each element they will not change color as what i expected… can someone explain me why??? and help me how to do the right thing.

Answer 1

The event mouseover will not fire as the element is not present on page on load … so you need to do this :

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

The on() functions will be triggered on the badge element (which is a table im guessing) and will only trigger when the event target is a td and the event is mouseover.

One thing to note though – this could easily be done with css :

#badge td:hover {
   color: red;
}

Thanks @WTK :

Keep in mind, that on() is available starting jQuery 1.7. For older versions of jQuery and similar outcome use either bind(), delegate() or live().