我正在使用可排序的 jQuery UI 对连接列表进行排序。更新事件似乎运行了两次。
这是完整的可排序调用：
$(".pageContent").sortable({
handle: ".quesText",
connectWith: ".pageContent",
containment: "section",
start: function(e, ui){
ui.placeholder.height(ui.item.height());
},
placeholder: "sortable-placeholder",
opacity: 0.5,
cursor: "move",
cancel: "input, select, button, a, .openClose",
update: function(e, ui){
var thisItem = ui.item;
var next = ui.item.next();
var prev = ui.item.prev();
var thisNumber = thisItem.find(".quesNumb");
var nextNumber = next.find(".quesNumb");
var prevNumber = prev.find(".quesNumb");
var tn = parseInt(thisNumber.text());
var nn = parseInt(nextNumber.text());
var pn = parseInt(prevNumber.text());
var quesNumbs = $(".quesNumb");
var newItemId = thisItem.attr("id").replace(/_\d+$/, "_");
//test if we are dragging top down
if(ui.position.top > ui.originalPosition.top){
quesNumbs.each(function(i){
var thisVal = parseInt($(this).text());
var grandparent = $(this).parent().parent();
var grandId = grandparent.attr("id").replace(/_\d+$/, "_");
if(thisVal > tn && (thisVal <= pn || thisVal <= (nn - 1))){
$(this).text(thisVal - 1 + ".");
grandparent.attr("id",grandId + (thisVal - 1));
}
});
if(!isNaN(pn) || !isNaN(nn)){
if(!isNaN(pn)){
//for some reason when there is a sender pn gets updated, so we check if sender exists
//only occurs sorting top down
if($.type(ui.sender) !== "null"){
var senderId = ui.sender.attr("id");
thisNumber.text(pn + 1 + ".");
thisItem.attr("id",senderId + "_" + (pn + 1));
alert(thisItem.attr("id"));
}
else {
thisNumber.text(pn + ".");
thisItem.attr("id",newItemId + pn);
alert(thisItem.attr("id"));
}
}
else {
thisNumber.text(nn - 1 + ".");
}
}
else {
//something will happen here
}
}
//otherwise we are dragging bottom up
else {
quesNumbs.each(function(i){
var thisVal = parseInt($(this).text());
if(thisVal < tn && (thisVal >= nn || thisVal >= (pn + 1))){
$(this).text(thisVal + 1 + ".");
}
});
if(!isNaN(pn) || !isNaN(nn)){
if(!isNaN(pn)){
thisNumber.text(pn + 1 + ".");
}
else {
thisNumber.text(nn + ".");
}
}
else {
//something will happen here
}
}
}
});
这是似乎运行两次的部分：
if($.type(ui.sender) !== "null"){
var senderId = ui.sender.attr("id");
thisNumber.text(pn + 1 + ".");
thisItem.attr("id",senderId + "_" + (pn + 1));
alert(thisItem.attr("id"));
}
else {
thisNumber.text(pn + ".");
thisItem.attr("id",newItemId + pn);
alert(thisItem.attr("id"));
}
当排序保持在同一个列表alert中ui.sender时，我希望只得到一个。null当一个项目离开一个列表去另一个然后ui.sender将不再是null。
问题是当我将项目移动到新列表时会收到2条警报消息。好像 ui.sender 在更新函数运行一次后设置，然后再次运行更新函数。显然这不好，因为我正在覆盖不一定应该被覆盖的数据。
如果是这种情况，我应该如何重写我的代码以避免覆盖数据？
编辑
我相信每次更改列表 DOM 时都会调用更新事件，而不仅仅是一般的 DOM。因此，对于每个具有 DOM 更改的列表，更新都会运行。当我将一个项目移动到一个新列表时，我正在更新两个列表。
所以我想新的问题是：我如何重写这段代码，知道它会触发两次？是否有可以实现此目的的 Receive 和 Remove 事件的组合？