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.

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

Answer 2

Live events is what you're looking for.

Answer 3

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.

Answer 4

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 5

Look at the 1.4.2 .delegate()

The documentation is here:Delegate