Question

trying to set up a nice drag and drop save to database page.
It also should be able to delete the lines, I’ve used a list (ul/li). And all works fine, but as soon as the load action has done it’s job, the “$(“#menuList > li > .remove”).click” won’t work anymore. The rest of the actions work, drag & drop, serialize for oder, write to database…
Anybody that can see what causes this problem?

function sortTableMenu() {

var order = $('#menuList').sortable('serialize');
$.post("PLUGINS/SortableMenu/process-sortable.php",order);
$("#menuList").load("PLUGINS/SortableMenu/sortableMenu_ajax.php");

}

$("#menuList > li > .remove").click(function () {  
var removeID = $(this).attr('id');
$.ajax({
type: 'post',
url: 'PLUGINS/SortableMenu/removeLine.php',
data: 'id='+removeID,
success: function () {
   $('#listItem_'+removeID).remove();
   var order = $('#menuList').sortable('serialize');
    $.post("PLUGINS/SortableMenu/process-sortable.php",order); 
  }
   });

});

$('#new_documents > li').draggable({
addClasses: false,
helper:'clone',
connectToSortable:'#menuList'
});

$("#menuList").droppable({
 addClasses: false,
drop: function() {
var clone = $("#menuList > li#newArticleTYPE1");
$(clone).attr("id","listItem_newArticleTYPE1"); 
}
});

$("#menuList").sortable({
  handle : '.handle, .remove',
  update : sortTableMenu
});

Answer 1

You are replacing the actual DOM elements you attached the event to with new ones, this calls for a .live() use:

$("#menuList > li > .remove").live('click',function () {  
var removeID = $(this).attr('id');
$.ajax({
type: 'post',
url: 'PLUGINS/SortableMenu/removeLine.php',
data: 'id='+removeID,
success: function () {
   $('#listItem_'+removeID).remove();
   var order = $('#menuList').sortable('serialize');
    $.post("PLUGINS/SortableMenu/process-sortable.php",order); 
  }
   });

});