Responding to click event of element added to document after page load

Question

I am writing a page which uses a lot of in situ editing and updating using jQuery for AJAX.

I have come accross a problem which can best be summarized by the workfl

Answer 1

Live events is what you're looking for.

Answer 2

live is deprecated, use .on() like such:

$('#table tbody').on('click', 'tr', function(e){
    var row = $(this).find('td:first').text();
    alert('You clicked ' + row);
});

Answer 3

you can use live() that binds a function to all elements matching your selection, even those created in the future: http://api.jquery.com/live/

Answer 4

Use a live handler. ^{deprecated since some time, check the second part of my answer for better solutions!}

$('img#inserted_form_btn').live('click', function() {
    // Your click() code
});

---

Assuming the image is a child of some element that already exists when binding the event, you can use a delegate instead:

$('#parent-element').on('click', '#inserted_form_btn', function() {
    // Your click() code
});

If you do not have jQuery 1.7+:

$('#parent-element').delegate('#inserted_form_btn', 'click', function() {
    // Your click() code
});

In any case, you can use a delegate and use $(document) instead of $('#parent-element') if there is no suitable parent element.

Answer 5

Look at the 1.4.2 .delegate()

The documentation is here:Delegate

Answer 6

You need to either assign the click even as a post process event on the initial AJAX call, i.e.

$.ajax({ url: "test.html", context: document.body, success: function(){
    $('img#inserted_form_btn').click(function(){
        $.ajax({'type: 'POST', 'url': 'www.example.com', function($data){
            $(data.id).html($data.frm);
        }), 'dataType': 'json'}
    });
}});

or use the .live method to ensure the event is reassigned when the dom element is created.