2

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?

1

6 Answers 6

12

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.

4
  • It's better to use event delegation (.delegate()). See explanations on the official page api.jquery.com/live Jun 13, 2012 at 10:50
  • I don't think that method existed at the time when I posted this answer. Jun 13, 2012 at 10:52
  • Available since 1.4.2, Feb '10 Jun 13, 2012 at 11:24
  • Ah well, he did not provide enough context to use delegate properly. Jun 13, 2012 at 12:21
1

Live events is what you're looking for.

1

Look at the 1.4.2 .delegate()

The documentation is here:Delegate

1

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

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.

0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.