Question

Can jquery-ajax reload a div WITH DYNAMIC CONTENTS. For example if i have a div that shows a list of documents updated by a user on a website with each doc having a delete hyperlink. I want a post request to be made to a servlet on click of delete and in success function of ajax i want to reload the list of documents again including the Delete link that can again have the ability to post data to the delete servet and so on …

I know how to use jQuery-ajax and i succeed till the point where my div reloads with the new doc list (after a doc being deleted). However this new list loaded by ajax has a problem. The delete link does not work anymore.

For those who have failed to understand please consider this example.
Suppose that initially i see this on the UI :

Delete       One.doc
Delete       Two.doc

Now, Delete is a link on click of which i do a POST to a servlet called DeleteServlet that deletes the doc. So if i clicked Delete of One.doc, it should get deleted. Then in success of ajax i reload the div that shows the list of docs. So now i see this on UI :

Delete       Two.doc

Fine, that works but now my Delete link does not work 🙁

I saw the code shown by view source and all seems good.

Below is my code for some referene :

a class="subm_it"onclick="filename='${item.path}';document.getElementById('test').submit()" href="#">Delete ..


$(function() {
     $("a.subm_it").click(function() {
     var dataString = 'filename='+ filename;
     dataString += '&&restype='+resType;
     dataString += '&&userid='+userid;
     $.ajax({
      type: "POST",
      url: "delete.do",
      data: dataString,
 success: function(data) {
$('div#editable').html(data); 
...

Answer 1

Use .live() instead of .click(): http://api.jquery.com/live/

$('.clickme').live('click', function() {
  // Live handler called.
});