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?

of course! the first script works for static element, but doesn't work for dynamically generated element. — hronikata
– hronikata, Commented Nov 18, 2014 at 13:46
@hronikata first script is working fine only , not for you ? — Dimag Kharab
– Dimag Kharab, Commented Nov 18, 2014 at 13:47
try to make a function in stead of $(document).on... but in your li use onhover="dofunction(this)" or something. — Refilon
– Refilon, Commented Nov 18, 2014 at 13:48

John Weisz · Accepted Answer · 2014-11-18 14:00:18Z

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.

Mark Pieszak - Trilon.io · Accepted Answer · 2014-11-18 14:05:22Z

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.

edited Nov 18, 2014 at 14:05

answered Nov 18, 2014 at 13:50

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

3 Comments

hronikata Over a year ago

this script doesn't work for static and dynamically generated elements both :(

Mark Pieszak - Trilon.io Over a year ago

What version of jQuery are you using?

Mark Pieszak - Trilon.io Over a year ago

Sorry, look at my edit now. That will do the trick! @hronikata I had to wrap it in $('body') and it worked. Strange, but it worked in jsfiddle

Amit Singh · Accepted Answer · 2014-11-18 13:51:05Z

0

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

answered Nov 18, 2014 at 13:51

Amit Singh

2,2754 gold badges27 silver badges50 bronze badges

Collectives™ on Stack Overflow

jQuery add hover to dynamically generated element

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related