Have Geek Brain

Response to the click event of an element added to the document after the page has loaded

I am writing a page that uses a lot of in-place editing and updating with jQuery for AJAX.

I ran into a problem that can best be summarized with the following workflow:

  • Clicking on 'element1' on the page results in a jQuery AJAX POST
  • Data received in json format
  • Data received in json format
  • The resulting data is used to update existing results "on page" on the page
  • The received data is relevant to the HTML form
  • I want jQuery to be responsible for POSTing a form when a form button is clicked

The problem arises in point 6 above. I have a code on my main page that 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 doesn't fire. I think this is because when the document is first loaded the img # insert_form_btn element does not exist on the page (it gets inserted into the DOM as a result of clicking an element on the page (not shown in the code above - keep the question short)

So my question is, how can I get jQuery to respond to events occurring on elements that were added to the DOM AFTER the page was loaded?

+2


a source to share


6 answers


Use a live handler. outdated for a while, check the second part of my answer for the best solutions!

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

Assuming the image is a child of some element that already exists when the event is bound, a delegate can be used instead:



$('#parent-element').on('click', '#inserted_form_btn', function() {
    // Your click() code
});

If you don't 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 $('#parent-element')

if there is no suitable parent.

+10


a source


Live events are what you are looking for.



+1


a source


Look at 1.4.2 .delegate()

The documentation is here: Delegate

+1


a source


You need to either assign the click, or 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 that the event is re-assigned when the dom element is created.

0


a source


you can use the live () function, which binds the function to all elements matching your choice, even those created in the future: http://api.jquery.com/live/

0


a source


live is deprecated, use .on () like this:

$('#table tbody').on('click', 'tr', function(e){
    var row = $(this).find('td:first').text();
    alert('You clicked ' + row);
});
0


a source






More articles:


All Articles