CODEWITHSUNDEEP
javascriptjquery
Noam
Noam

Reputation: 617

jQuery .on() not binding event-handler

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.

Upvotes: 3

Views: 1091

Answers (2)

nnnnnn
nnnnnn

Reputation: 150010

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.

Upvotes: 6

Mehdi Karamosly
Mehdi Karamosly

Reputation: 5428

'mouseenter' event should work just fine.

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

This is the jsfiddle

Upvotes: 1

Related Questions