Event binding on dynamically created elements?

As of jQuery 1.7 you should use jQuery.fn.on:

$(staticAncestors).on(eventName, dynamicChild, function() {});

Prior to this, the recommended approach was to use live():

$(selector).live( eventName, function(){} );

However, live() was deprecated in 1.7 in favour of on(), and completely removed in 1.9. The live() signature:

$(selector).live( eventName, function(){} );

… can be replaced with the following on() signature:

$(document).on( eventName, selector, function(){} );

For example, if your page was dynamically creating elements with the class name dosomething you would bind the event to a parent which already exists, often document.

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

Any parent that exists at the time the event is bound is fine. For example

$('.buttons').on('click', 'button', function(){
    // do something
});

would apply to

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>

(Visited 8 times, 1 visits today)
PHP Parse/Syntax Errors; and How to solve them?
How to make a great R reproducible example?

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *