jquery late binding

Question

i have a code that bind's on click action on page load, it is a link. When i clicking it, it send ajax request and replace content in some div with jquery append() function. This new content has a links and i need to bind some action for them, but i could't.. bind did't work i think, because jquery append doesn't update DOM tree. How could i get a late binding?

Answer 1

There are 3 functions that can do this:

• $(selector).live(events, data, handler); - jQuery 1.3+ - version deprecated: 1.7, removed: 1.9 (reference)
• $(document).delegate(selector, events, data, handler); - jQuery 1.4.3+ - As of jQuery 1.7, .delegate() has been superseded by the .on() method. (reference)
• $(document).on(events, selector, data, handler); - jQuery 1.7+ - preferred (reference)

It's generally adviced to use on() and it's use is simple and probably preferred way.

1. The first selector must exist when calling the function and may not be deleted or the event will be gone too (this can be document).
2. The first parameter is the event (e.g. "click")
3. The second parameter is the selector of which you want to bind the event on.
4. Then finally you can add some custom data and a function to the event.

Here's some sample code:

// Make sure the DOM is ready
$(function() {
    // Bind the click event to the function
    $(document).on("click", "a.class", function(event) {
        // Put your code here.
    });
});