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

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.