I have a an element with thumbnails. I allow users to sort their display order (which fires off an update to the DB via ajax). I also allow them to delete images (which, after deletion, fires off a request to update the display order for all remaining images).

My problem is with binding or live I think, but I don't know where to apply it.

The array fired off upon delete contains ALL the ids for the images that were there on page load. The issue is that after they delete an image the array STILL contains the original ids (including the one that was deleted) so it is obviously not refreshing the value of the element after ajax has removed things from inside it. I need to tell it to go get the refreshed contents...

From what I have been reading, this is normal but I don't understand how to tie it into my routine. I need to trigger the mass re-ordering after any deletion.

Any ideas gurus?

    $('a.delimg').click(function(){
 var parent = $(this).parent().parent(); 
 var id = $(this).attr('id');
 $.ajax({
    type: "POST",
    url: "../updateImages.php",
    data: "action=delete&id=" + id,
    beforeSend: function() {
  parent.animate({'backgroundColor':'#fb6c6c'},300);

  $.jnotify("<strong>Deleting This Image & Updating The Image Order</strong>", 5000);
  },
    success: function(data) {
  parent.slideUp(300,function() {
   parent.remove();

  $("#images ul").sortable(function() { //NEEDS TO GET THE UPDATED CONTENT
  var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
  $.post("../updateImages.php", order, function(theResponse){
  $.jnotify("<strong>" + theResponse + "</strong>", 2000);
  });
     });
       });

      }
    });
    return false;
    });

Thanks for any help you can be.