从Jquery UI中删除项目可排序

Question

我正在尝试找出从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/

Answer 1

updatePosition在您的删除事件处理程序中，只需包含对after$(".delete").remove();这不会涵盖任何从列表中删除元素的调用：如果这确实是您的意图，那么您将不得不采用类似 @pmich35 的答案（尽管这确实意味着从那时起，无论是否对列表中的任何元素updatePosition进行每次$.remove调用，都会被调用 - 有点矫枉过正）

你更新的小提琴。

编辑：目前没有$.sortable适合您目的的“删除”事件 - 那里的删除事件仅涵盖用户将列表项从列表拖动到另一个可排序列表的特定情况。Sortable实际上并不总是跟踪您的列表项 - 它不关心您是否以编程方式添加或删除项目 -它只会促进用户拖动事件。它实际上并不执行任何“排序”，所有出现的排序都只是 jQuery 拉取 DOM 元素以形成其对象的方式（如果您将列表项缓存在 jQuery 对象中，然后对这些项进行拖动排序，缓存的列表项的顺序将与以前相同）。由于“排序”只是函数的幻觉，因此它“无法”主动跟踪追加/删除。

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

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

这也实现了您的目标，但仍然不是您想要的“干净”方式。一般元素上的“删除”事件是在 jQuery UI 1.10.3 中添加的（因此 jsfiddle 不会覆盖它，它们只会上升到 1.9.2），并且updatePosition每当任何当前或将来的列表项被删除（从DOM - 拖动的删除仍然被 的$.sortable删除事件捕获）。