为什么在测试ui.sender时jquery sortable中的update事件似乎运行两次 [英] Why does the update event in jquery sortable seem to run twice when testing for ui.sender
问题描述
我正在使用可排序的jQuery UI对连接列表进行排序.更新事件似乎正在运行两次.
I'm using jQuery UI sortable to sort connected lists. The update event appears to be running twice.
这是完整的可排序调用:
Here is the full sortable call:
$(".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
}
}
}
});
这部分似乎运行了两次:
Here is the part that seems to run twice:
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.
I am expecting to only get one alert as ui.sender is null when the sorting stays inside the same list. When an item leaves a list to go to another then ui.sender will no longer be null.
问题是，当我将项目移到新列表时，我会收到 2 警报消息.好像ui.sender在更新功能运行一次之后设置，然后再次运行更新功能.显然这不好，因为我正在覆盖不一定要被覆盖的数据.
The problem is I will get 2 alert messages when I move an item to a new list. Its as if ui.sender is set after the update function runs once then it runs through the update function again. Obviously this is no good because I am overwriting data that should not necessarily be overwritten.
如果是这种情况，我应该如何重写代码以避免覆盖数据?
If that is the case how should I rewrite my code to avoid overwriting data?
编辑
我相信每次列表DOM更改时都会调用更新事件，而不仅仅是一般的DOM.因此，对于每个具有DOM更改的列表，更新都会运行.当我将一项移至新列表时，我正在更新两个列表.
I believe the update event is called each time a list DOM is changed, not just the DOM in general. So for each list that has a DOM change the update runs. When I move one item to a new list I am updating two lists.
所以我想新的问题是:如果知道它将触发两次，我该如何重写此代码?是否可以通过Receive和Remove事件的组合来实现这一目标?
So I guess the new question is: how do I rewrite this code knowing it will fire two times? Is there a combination of Receive and Remove events that could achieve this?
推荐答案
我对每个可排序事件进行了一些调查.这是我的发现，按发生的顺序列出:
I did some investigating into each sortable event. Here are my findings, listed in the order that they take place:
$(".pageContent").sortable({
start: function(e,ui){
//Before all other events
//Only occurs once each time sorting begins
},
activate: function(e,ui){
//After the start event and before all other events
//Occurs once for each connected list each time sorting begins
},
change: function(e,ui){
//After start/active but before over/sort/out events
//Occurs every time the item position changes
//Does not occur when item is outside of a connected list
},
over: function(e,ui){
//After change but before sort/out events
//Occurs while the item is hovering over a connected list
},
sort: function(e,ui){
//After over but before out event
//Occurs during sorting
//Does not matter if the item is outside of a connected list or not
},
out: function(e,ui){
//This one is unique
//After sort event before all drop/ending events unless **see NOTE
//Occurs, only once, the moment an item leaves a connected list
//NOTE: Occurs again when the item is dropped/sorting stops
//--> EVEN IF the item never left the list
//--> Called just before the stop event but after all other ending events
},
beforeStop: function(e,ui){
//Before all other ending events: update,remove,receive,deactivate,stop
//Occurs only once at the last possible moment before sorting stops
},
remove: function(e,ui){
//After beforeStop and before all other ending events
//Occurs only once when an item is removed from a list
},
receive: function(e,ui){
//After remove and before all other ending events
//Occurs only once when an item is added to a list
},
update: function(e,ui){
//After receive and before all other ending events
//Occurs when the DOM changes for each connected list
//This can fire twice because two lists can change (remove from one
//list but add to another)
},
deactivate: function(e,ui){
//After all other events but before out (kinda) and stop
//Occurs once for each connected list each time sorting ends
},
stop: function(e,ui){
//After all other events
//Occurs only once when sorting ends
}
});
在解决我的问题时，我只是通过将我的update函数的内容包装在检查ui.sender的if else语句中来强制它只运行一次.基本上说如果ui.sender不存在，那么这是第一次通过update函数，我们应该执行该函数，否则什么也不做.
In solving my problem I just force the contents of my update function to only run once by wrapping it in an if else statement that checks for ui.sender. Basically it says if ui.sender does not exist then this is the first time through the update function and we should do the function, otherwise do nothing.
这篇关于为什么在测试ui.sender时jquery sortable中的update事件似乎运行两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
