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.ph开发者_运维知识库p",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
});
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);
}
});
});
精彩评论