从Jquery UI中删除项目可排序

我正在尝试找出从JQuery UI可排序列表中删除项目的正确方法。 我创建了一个JSfiddle来说明我的问题。

基本上,我有一些围绕JQuery UI可排序窗口小部件的回调,我希望一旦从窗口小部件中删除元素就会执行这些回调。 这样做的正确方法是什么? 因为“$ .remove”和“$ .detach”似乎都有效。

编辑1:我不是在寻找我的问题的修补程序,而是更多关于JQuery UI可排序列表如何工作的解释,而下面的答案清楚地解决了问题。 我不认为这是一种干净的方式。 我认为JQuery UI Sortable应该知道,当您从列表中删除两个元素之间的元素时,您应该需要重新排序

如果你在下面注意,当我在元素上调用remove时,函数不会被执行。

$(document).ready(function(){ $('ul').sortable({ stop: function(event, ui) { updatePosition(); } }); $('.remove').on('click', function(e){ $(".delete").remove(); }); }); function updatePosition(){ $('ul li').each(function(i){ $(this).html(i + 1); }); } 

http://jsfiddle.net/72RTz/2/

在你的删除事件处理程序中,只需在$(".delete").remove();之后包含对updatePosition的调用updatePosition $(".delete").remove(); 这不会涵盖从列表中删除任何时候的元素:如果那是真正的你的意图那么你将不得不使用类似@pmich35的答案 (尽管它确实意味着每个$.remove都会调用updatePosition从那时起打电话给你列表中的任何元素 – 有点矫枉过正)

你的更新小提琴 。

编辑: $.sortable目前没有适合您目的的“删除”事件 – 删除事件只包含用户将列表项从列表拖到另一个可排序列表的特定情况。 Sortable实际上并不总是跟踪您的列表项 – 它不关心您是否以编程方式添加或删除项目 – 它只是方便用户拖动事件 。 它实际上并没有执行任何“排序”,并且排序的所有外观都是jQuery拉动DOM元素以形成它的对象的方式(如果你将列表项缓存在jQuery对象中,然后拖动排序项,缓存列表项的顺序将与之前相同。 由于“排序”只是function的错觉,它“无法”主动跟踪追加/删除。

还有另一种可能的解决方法:将updatePosition附加到ul元素本身:

 $( 'ul' ).on( 'remove', 'li', updatePosition ); 

这也完成了你的目标,但仍然不是你想要的“干净”方式。 一般元素上的’remove’事件已添加到jQuery UI 1.10.3中(因此jsfiddle不会覆盖它,它们只会达到1.9.2),并且每当删除任何当前或将来的列表项时都会调用updatePosition (来自DOM – 拖动的删除仍然被$.sortable的删除事件捕获。

你可以覆盖删除function,但是它不是很优化:

 (function(){ oldRemove = jQuery.fn.remove; jQuery.fn.remove=function(){ oldRemove.apply(this, arguments); updatePosition(); } })(); $(document).ready(function(){ $('ul').sortable({ stop: function(event, ui) { updatePosition(); } }); $('.remove').on('click', function(e){ $(".delete").remove(); }); }); function updatePosition(){ $('ul li').each(function(i){ $(this).html(i + 1); }); }