jQuery .on() not binding event-handler

Question

I'm trying to attach an event handler to every row in a dynamically-changing table with no success (using jQuery version 1.11.0) * Edit: As many have pointed out, 'hover' is depricated, but my problem also exists with other handlers*

$('#tableBody tbody').on('hover', 'tr', function() {
    alert('hovering on a row');
});

The above code is pretty much identical to the jQuery documentation- http://api.jquery.com/on/, and I've tried other variations, like

$(document).on('hover', '.tableRow', function(){...});

The event handler just isn't getting added. I should note that the table's contents are retrieved though AJAX and then displayed, which is why I'm using the .on() method.

Answer 1

Passing 'hover' as a string to .on() is no longer supported (removed in v1.9 as mentioned under the "Additional Notes" in the .on() documentation). The equivalent is to use 'mouseenter mouseleave' instead, or if you just want to do something when the mouse enters the element(s) in question try:

$('#tableBody tbody').on('mouseenter', 'tr', function() {

Note that the #tableBody element would need to exist at the time that that runs, so you'd need to include that either in a document ready handler or in a script element at the end of the body.

And the id 'tableBody' sounds like it is assigned to the <tbody> element, which doesn't make sense when your selector also includes tbody as a child of #tableBody.