how to attach hover handler to TD elements, filtering on a class selector that may be applied in the future

Question

My table will have a number of TD elements that get assigned a class, .foo, during the course of the user working with the data. The table might have a few hundred cells and only a dozen of those may acquire the .foo class. I want to listen for hover on those particular TD elements. It looks as though the delegate() method in jQuery listens for javascript events, whereas hover is a jQuery event, is that right? How to create a delegate to listen for hover on TD.foo elements that will have the .foo class assigned to them in the future?

possible duplicate of [Adding event listeners to current and future elements with a particular class](http://stackoverflow.com/questions/8459204/adding-event-listeners-to-current-and-future-elements-with-a-particular-class) — Ram, Sep 12 '13 at 18:39

OneOfOne · Accepted Answer · 2013-09-12T18:48:59.910

4

delegate is not recommended for use in newer jQuery, you should use on

As of jQuery 1.7, .delegate() has been superseded by the .on() method.

$('#table').on('mouseenter mouseleave', 'td.foo', function(e) {
    if(e.type === 'mouseenter') {
        //hover in
    } else {
        //hover out
    }
});

edited Sep 12 '13 at 18:48

answered Sep 12 '13 at 18:41

OneOfOne

95,033
20
184
185

Come on, it's not even deprecated :). – Ram Sep 12 '13 at 18:46
My bad, it's not deprecated but not the recommended way anymore. – OneOfOne Sep 12 '13 at 18:48

score 0 · Answer 2 · answered Sep 12 '13 at 18:38

0

$("#tblId").on("hover", ".foo", function() {
  // Code here
});

answered Sep 12 '13 at 18:38

Daniel Lorenz

4,178
1
32
39

2

`on("hover"` was deprecated in 1.8 and removed in 1.9, so you should either use `on("mouseenter mouseleave"` (like @OneOfOne), or `.hover()` :) – Reinstate Monica Cellio Sep 12 '13 at 18:46
Gah, really? Good to know! – Daniel Lorenz Sep 12 '13 at 18:58
1

I started learning jQuery 2 years ago and recently upgraded from 1.7 to 1.9. EVERYTHING broke! lol – Reinstate Monica Cellio Sep 12 '13 at 18:59

how to attach hover handler to TD elements, filtering on a class selector that may be applied in the future

2 Answers2