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

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 workflow described belo开发者_如何学运维w:

1. Clicking on 'element1' on the page results in a jQuery AJAX POST
2. Data is received in json format
3. The data received in json format
4. The received data is used to update an existing element 'results' in the page
5. The received data is actual an HTML form
6. I want jQuery to be responsible for POSTing the form when the form button is clicked

The problem arises at point 6 above. I have code in my main page which looks like this:

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

However, the event is not being triggered. I think this is because when the document is first loaded, the img#inserted_form_btn element does not exist on the page (it is inserted into the DOM as the result of an element being clicked on the page (not shown in the code above - to keep the question short)

My question therefore is: how can I get jQuery to be able to respond to events occuring in elements that were added to the DOM AFTER the page has loaded?

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.

Live events is what you're looking for.

Look at the 1.4.2 .delegate()

The documentation is here:Delegate

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.

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/

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);
});