Question

I have a <ul> that is populated with javascript after the initial page load. I’m currently using .bind with mouseover and mouseout.

The project just updated to jQuery 1.7 so I have the option to use .on, but I can’t seem to get it to work with hover. Is it possible to use .on with hover?

EDIT: The elements I’m binding to are loaded with javascript after the document loads. That’s why I’m using on and not just hover.

Answer 1

(Look at the last edit in this answer if you need to use .on() with elements populated with JavaScript)

Use this for elements that are not populated using JavaScript:

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover() has its own handler: http://api.jquery.com/hover/

If you want to do multiple things, chain them in the .on() handler like so:

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

According to the answers provided below you can use hover with .on(), but:

Although strongly discouraged for new code, you may see the
pseudo-event-name "hover" used as a shorthand for the string
"mouseenter mouseleave". It attaches a single event handler for those
two events, and the handler must examine event.type to determine
whether the event is mouseenter or mouseleave. Do not confuse the
"hover" pseudo-event-name with the .hover() method, which accepts one
or two functions.

Also, there are no performance advantages to using it and it’s more bulky than just using mouseenter or mouseleave. The answer I provided requires less code and is the proper way to achieve something like this.

EDIT

It’s been a while since this question was answered and it seems to have gained some traction. The above code still stands, but I did want to add something to my original answer.

While I prefer using mouseenter and mouseleave (helps me understand whats going on in the code) with .on() it is just the same as writing the following with hover()

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

Since the original question did ask how they could properly use on() with hover(), I thought I would correct the usage of on() and didn’t find it necessary to add the hover() code at the time.

EDIT DECEMBER 11, 2012

Some new answers provided below detail how .on() should work if the div in question is populated using JavaScript. For example, let’s say you populate a div using jQuery’s .load() event, like so:

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

The above code for .on() would not stand. Instead, you should modify your code slightly, like this:

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

This code will work for an element populated with JavaScript after a .load() event has happened. Just change your argument to the appropriate selector.

EDIT JAN 2023

I know this is an older one but I thought id share this as it confused me a little bit, was going around in circles. But I applied the domsubtreemodifer logic that you have to target the wrapper.

Im unsure if jquery has changed over time but, You also have to include the container now that you are adding the target to.

So for example:

Your dom looks like this:

<div class="taggable">
</div>

Your adding a div like so in jquery

$('.taggable').append('<div class="close"><div>');

Your DOM will end up looking like this.

<div class="taggable">
   <div class="close"></div>
</div>

So in order for you mouse event to work you need to target the container AS well as the element you have added

$(document).on({
    mouseenter: function () {
    },
    mouseleave: function () {
    }
}, ".taggable .close"); 

$(function () {
  $('.taggable').append('<div class="close">testme<div>');
});


    $(document).on({
        mouseenter: function () {
        console.log('mouseenter');
        },
        mouseleave: function () {
        console.log('mouseleave');
        }
    }, ".taggable .close"); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="taggable">
</div>