Jquery: highlight rows printed in .html() response - html

Question

I'm having a couple of issue with Jquery. Basically I have a .html() response printed and I have to highlight rows of a table on mouseover but it doesn't work.
HTML table
<table id='simplehighlight'>
<tr>
<td>header 1</td>
<td>header 2</td>
</tr>
<tr>
<td>bla bla bla</td>
<td>highlight this row</td>
</tr>
<tr>
<td>bla bla bla</td>
<td>or highlight this row</td>
</tr>
</table>
the table above is printed with PHP echos. The PHP script is called with ajax and the response is printed inside a div with the .html() function. Example:
function(data, textStatus) {
if(textStatus == "success") {
$('#resultBox').html(data);
}
}, 'text/html');
}
data is the HTML table. Last but not least I have the jquery code for active the highlight which it doesn't work.
$("simplehighlight tr").not(':first').hover(
function () {
$(this).css("background","yellow");
},
function () {
$(this).css("background","");
}
);
instead of highlighting the row I have put a simple alert to check if it works, but obviusly it does not. Why? What's wrong in my code? How can I accomplish my task, aka highlight these rows?
Thanks everyone,
Alberto-

Answer 1

Attaching an event handler via jQuery's on should work:
$('body').on('mouseenter mouseleave', '#simplehighlight tr:not(:first-child)', function() {
$( this ).toggleClass( 'highlighted' );
} );
See this jsFiddle.
The good thing with using on this way is, that the table you mentioned may be added at any time (e.g. through an AJAX call). When calling on directly on the jQuery match (as in jQuery("#simplehighlight tr").not(':first').on(...)), jQuery binds the handler only to the currently existing DOM elements.
Note: I replaced the hover event with mouseenter mouseleave, because hover is removed since jQuery 1.9:
Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a
shorthand for the string "mouseenter mouseleave".
Source: http://api.jquery.com/on/

Answer 2

You have to remember that commands such as the one your are trying to execute, will only be executed against elements that already exist in your DOM. So basically you have to combine the two segments of your code like this:
function(data, textStatus) {
if(textStatus == "success") {
$('#resultBox').html(data);
$("simplehighlight tr").not(':first').hover(
// do highlight stuffs here
alert("IT WORKS??");
});
}
}, 'text/html');
}

Answer 3

Instead of firing the hover() function manually, you should set up an event handler to do so. Events will also get captured from inserted elements; so you may set up the event listener even before the AJAX call.
jQuery( 'simplehighlight tr' ).not(':first').on( 'hover', function() {
var currentTR = jQuery( this );
currentTR.addClass( 'highlight' );
} );

Answer 4

try
jQuery("#simplehighlight tr").not(':first').mouseover(function(){
// do highlight stuffs here
alert("IT WORKS??");
});
here a js fiddle
here