jQuery add hover to dynamically generated element

Question

I create element below dynamically

<ul class="services-list clearfix">
                    <li class="services-1" data-service-title="Hint 1"></li>
                    <li class="services-2" data-service-title="Hint 1"></li>
                    <li class="services-3" data-service-title="Hint 1"></li>
                    <li class="services-4" data-service-title="Hint 1"></li>
                    <li class="services-5" data-service-title="Hint 1"></li>
                    <li class="services-6" data-service-title="Hint 1"></li>
                </ul>

and then I need to add hover to this element.

I tried this code

$('.services-list > li').on({
    mouseenter: function () {
        var service_title = $(this).data( 'service-title' );
        $('<span class="service-hint"></span>').text(service_title).appendTo($(this));
    },
    mouseleave: function () {
        $('.services-list > li').find('.service-hint').remove();
    }
});

and this

$(document).on('hover', '.services-list > li', function () {
    var service_title = $(this).data( 'service-title' );
    $('<span class="service-hint"></span>').text(service_title).appendTo($(this));
}, function () {
    $('.services-list > li').find('.service-hint').remove();
});

but they don't work both. What's wrong? How to fix it?

Answer 1

The first area is just a normal .on() event, since you created in an object format, you can put the parent context / selector at the end. This will make it a delegated event.

$('.services-list > li').on({
    mouseenter: function () {
        /* code */
    },
    mouseleave: function () {
        /* code */
    }
}, $('body') ); // <-- now it's delegated to the parent context of body
            // use something more specific, maybe an ID of an <div> around your area

This should do the trick.

Also, as a side note:

Don't use document (or as I showed body above) as a parent context. That's one of the main reasons they removed .live() from the jQuery library. Make it much more specific, so the event doesn't bubble on EVERY mouseover on your page. Make it soething more specific! #parentDiv or something.

Answer 2

If your only concern is to show additional text on mouseover that can be available at the time these elements are added, I recommend using pure CSS to achieve the functionality:

HTML code

<ul class="services-list clearfix">
    <li class="services-1" data-service-title="Hint 1">Service 1 <span class="hint">Hint 1</span></li>
    <li class="services-2" data-service-title="Hint 1">Service 2 <span class="hint">Hint 2</span></li>
    <li class="services-3" data-service-title="Hint 1">Service 3 <span class="hint">Hint 3</span></li>
    <li class="services-4" data-service-title="Hint 1">Service 4 <span class="hint">Hint 4</span></li>
    <li class="services-5" data-service-title="Hint 1">Service 5 <span class="hint">Hint 5</span></li>
    <li class="services-6" data-service-title="Hint 1">Service 6 <span class="hint">Hint 6</span></li>
</ul>

CSS code

.services-list li span {
    display: none;
}

.services-list li:hover span {
    display: inline;
}

http://jsfiddle.net/jghr2cgv/

---

If that is not possible, you are on the right path with jQuery delegate events:

$('.services-list-container').on('mouseenter', '.services-list li', function () {
    // Mouse over $(this) element, even if the element was added later, but container was present initially
});

You must attach this type of event handling to an element that is present at the time the event is bound. I recommend a container for that task instead of document, as implied in the second part of my answer.

Answer 3

You should be trying :

$(document).on('mouseover', '.services-list > li', function () {
var service_title = $(this).data( 'service-title' );
$('<span class="service-hint"></span>').text(service_title).appendTo($(this));
 }, function () {
$('.services-list > li').find('.service-hint').remove();
});

DEMO FIDDLE