jquery binding events to dynamically loaded html elements

Question

using jquery we can attach event handlers to the elements present in page, this is done inside document.ready() function. Now my difficulty is i have some elements like links etc loaded later (using ajax request) after document is downloaded . So those new elements are failing to bind with the handlers I defined in page. Is there any way to know when followed ajax queries are finish and then inside that i can bind my event handlers.

Thanks in advance

Calvin

Answer 1

The various ajax methods accept a callback where you can bind the handlers to the new elements.

You can also use event delegation with the delegate()^[docs] method or the live()^[docs] method.

The concept of event delegation is that you do not bind the handler to the element itself, but rather to some parent container that exists when the page loads.

The events bubble up from the elements inside the container, and when it reaches the container, a selector is run to see if the element that received the event should invoke the handler.

For example:

<div id="some_container"> <!-- this is present when the page loads -->

    <a class="link">some button</a>  <!-- this is present when the page loads -->
    <a class="link">some button</a>  <!-- this is present when the page loads -->
    <a class="link">some button</a>  <!-- this is present when the page loads -->


    <a class="link">some button</a>  <!-- this one is dynamic -->
    <a class="link">some button</a>  <!-- this one is dynamic -->
    <a class="link">some button</a>  <!-- this one is dynamic -->

    <span>some text</span>  <!-- this one won't match the selector -->
    <span>some text</span>  <!-- this one won't match the selector -->

</div>

Live Example: http://jsfiddle.net/5jKzB/

So you bind a handler to some_container, and pass a selector to .delegate() that looks for "a.link" in this case.

When an element that matches that selector is clicked inside of some_container, the handler is invoked.

$('#some_container').delegate('a.link', 'click', function() {
    // runs your code when an "a.link" inside of "some_container" is clicked
});

So you can see that it doesn't matter when the "a.link" elements are added to the DOM, as long as the some_container existed when the page loaded.

The live()^[docs] method is the same, except that the container is the document, so it processes all clicks on the page.

$('a.link').live('click',function() {
    // runs your code when any "a.link" is clicked
});

Ics

from what you said, it seems like using delegate() would be faster in terms of execution because it doesn't bind to all clicks. is that correct? – Marsiella

@Aaron: If you mean faster than .live(), I'd say yes. The selectors passed to your delegate calls only need to run for events that occur in the specified container. I never use .live(). – Ics

yes, that's what i meant. thanks, i have been using live() a lot but never learned about the delegate() method and its benefits until now. – Marsiella

.live() has been deprecated since 1.7 and removed in 1.9, so make sure you use .on() now! – Missus

To add to what Bashevis said, the .delegate() method has also been deprecated as of jQuery 3.0, so in expectation of a migration to this version, I recommend switching to the on() event as well: api.jquery.com/on $('#someAncestorElement').on('.elementThatWillExistLater', 'eventName', function () {...}); – Airwoman

Oops, I flipped the order of the selector and event in my above comment. It should be $('#someAncestorElement').on('eventName', '.elementsThatWillExistLater', function () {...}); – Airwoman

Answer 2

Then you'll want to use .live(). Have a look at http://api.jquery.com/live/.

Example:

$('a').live('click', function() {
  // Do something useful on click.
});

In the example above, any A elements, whether already existing or loaded after the document is loaded, will trigger the click event.

Merta

just an FYI, live s now deprecated – Frizzly

live is deprecated in favour of .on. So in this example you'll use $('a').on('click', function() { // Do something useful on click. }); – Bareback

Answer 3

These answers are now obsolete since the .live() method has been deprecated since version 1.7 of jQuery. For jQuery 1.7+ you can attach an event handler to a parent element using .on()

Edwinaedwine

Answer 4

bind them using .live(). It will attach the event handler to any element that matches the selector even if it doesn't exist on the page yet.

Brilliance