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

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.