.on() on a set of
elements

Question

I try to use the .on() jQuery function for call something when the <li> that I have, are hovered.

When I try to do something like this:

$("body").on({
            mouseenter: function () {
                console.warn('dansl\'body');
                //stuff to do on mouse enter
            },
            mouseleave: function () {
                console.warn('sorti');
                //stuff to do on mouse leave
            }
});

It works, i receive the messages when my body is hovered. But when i try to replace "body" by "li", it's not working anymore. How can I apply a .on() on a set of <li> ?

PS: My <li> are generated after the document load.

You need to use [event delegation](http://learn.jquery.com/events/event-delegation/). — Ben Fortune, Jun 25 '14 at 14:58
The .on code is not wrapped in ready block. And, as i said in my post, the li are generated after, dynamically added yes. — Superdrac, Jun 25 '14 at 14:58

Milind Anantwar · Accepted Answer · 2014-06-25T15:04:56.603

1

You need event delegation for attaching events to dynamically added dom:

Update: .hover() can not be used with .on(). You can instead use:

$("body").on({
mouseenter: function () {
    console.warn('dansl\'body');
    //stuff to do on mouse enter
},
mouseleave: function () {
    console.warn('sorti');
    //stuff to do on mouse leave
}
}, "li"); //pass the element as an argument to .on

edited Jun 25 '14 at 15:04

answered Jun 25 '14 at 14:57

Milind Anantwar

81,290
25
94
125

I'd recommend to look for the closest static parent element of `
` to make the code running faster.

VisioN

Jun 25 '14 at 14:59

@VisioN: i totally agree to that. But OP didnt provided the information that how does elements are added. – Milind Anantwar Jun 25 '14 at 15:00

1

It's not working... No error, nothin. – Superdrac Jun 25 '14 at 15:00

@MilindAnantwar i add the li on a static UL – Superdrac Jun 25 '14 at 15:01

4

Two problems: 1) `hover` maps to `mouseenter` and `mouseleave`, not `mouseover` and `mouseout`, 2) [`hover` cannot be used with `on()`](http://stackoverflow.com/questions/9827095/is-it-possible-to-use-jquery-on-and-hover). – Frédéric Hamidi Jun 25 '14 at 15:01

2

@FrédéricHamidi: thanks....seriously did not knew it. – Milind Anantwar Jun 25 '14 at 15:05

1

Ok it works thank you. As everybody say, perhaps that you should replace `body` by `ul` in your post. For access the direct parent. And for the future users which could have the same question. – Superdrac Jun 25 '14 at 15:11

score 1 · Answer 2 · answered Jun 25 '14 at 15:00

1

Try this:

$(document).on("mouseenter", "li", function() {
    // cause some mayhem here
}).on("mouseleave", "li", function() {
    // use this to restore order
});

What happens is the events are bound before the elements exist, so they don't receive the event. When you bind it on the document like this it will be present for all elements that match the selector, even dynamically created ones.

answered Jun 25 '14 at 15:00

MaKR

1,882
2
17
29

this works, but you should probably use a closer parent to `li` instead of `document` – Sam Creamer Jun 25 '14 at 15:01
3
There's no reason to split the individual events out into separate calls to `.on()`; the function supports passing an object with events/handlers as key/value pairs, as well as a selector for delegation. In other words, the only change to the code in the question should be adding ,"li" to the `.on()` call, as well as more specific selector to call it on (the static `
– Anthony Grist Jun 25 '14 at 15:03
Sam Creamer does have a point though, binding to the most direct parent of the li's is more proper and will execute faster. I'm lazy, however, and tend to use document for everything. It's "bad" practice, but not terrible. – MaKR Jun 25 '14 at 15:04

score -1 · Answer 3 · answered Jun 25 '14 at 15:13

-1

To sum up all the solutions provided here, since your target elements are loaded dynamically you may better use event delegation instead of binding events after elements creation.

For a single event the second argument of on method is used as a selector for the target elements:

$('ul').on('click', 'li', function() {
    // "dynamic" <li> element is clicked
});

For multiple events the following approach can be used:

$('ul').on({
    mouseenter: function() {
        // <li> receives 'mouseenter'
    },
    mouseleave: function() {
        // <li> receives 'mouseleave'
    }
}, 'li');

To make code running faster you should bind events to the closest static parent of the target element(s).

DEMO: http://jsfiddle.net/qb95X/

answered Jun 25 '14 at 15:13

VisioN

143,310
32
282
281

1

I can't accept your answer as the solution. You just copy pasted what others have answered. PS: The downvote is not from me... – Superdrac Jun 25 '14 at 15:19
@Superdrac Not really. This solution is not unique, as the problem is rather trivial and was asked on StackOverflow hundreds of times. Moreover, I have summed up all the facts regarding event delegation and proposed the workable solution with a DEMO in contrast to either wrong or excessive solutions provided around. – VisioN Jun 25 '14 at 15:22

.on() on a set of elements

3 Answers3

.on() on a set of
elements