jquery - 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 workflow described below:

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?

Answer 1

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.