Question

For example sake, I’ll use some dummy code.

I have some jQuery setup that sends out an ajax request and replaces the html of a particular div with a div that has a class of “activate_tooltip”

The initial jQuery is sent out using

$('.button').live('click', function() {

    //Ajax request goes out
    //Div gets replaced with content like so
    //$('.response_div').html('<div class="activate_tooltip"></div>'); 

});

I have a listener setup for the .activate_tooltip class, which for testing purposes, should send an alert to the window when hovered over. I used firebug to verify that the div content is getting added to the dom(and that the .activate_tooltip class is spelled correctly within the newly added div)… but hovering over the newly added div does nothing. The divs that already exist on the page, however, DO activate the alert when hovered over.

Any ideas?

Answer 1

Since you are adding the div dynamically you should use delegate or on(jQuery ver 1.7+) for events to work on dynamic elements. Try this.

Using delegate

$('.response_div').delegate('.activate_tooltip', 'mouseover', function() {
   alert('Hovered');
});

Using on

$('.response_div').on('mouseover', '.activate_tooltip', function() {
   alert('Hovered');
});

If you have the same behavior on mouseover and mouseout event then you can use hover event instead of mouseover.

References:

• delegate() – http://api.jquery.com/delegate/
• on() – http://api.jquery.com/on/