jquery - 从 Jquery UI Sortable 中删除项目

Question

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

基本上，我有几个围绕 JQuery UI 可排序小部件的回调，并且我希望在从小部件中删除元素后立即执行这些回调。这样做的正确方法是什么？因为“$.remove”和“$.detach”似乎都有效。

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

如果您注意到下面的内容，当我在元素上调用删除时，该函数不会被执行。

$(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

在您的删除事件处理程序中，只需在 $(".delete").remove(); 之后包含对 updatePosition 的调用，这不会涵盖任何 - 并且-所有元素都会从您的列表中删除:如果这确实是您的意图，那么您将不得不使用@pmich35's answer之类的东西(尽管这确实意味着每次 $.remove 调用都会调用 updatePosition ，无论是否对列表中的任何元素进行调用，从那时起 - 有点矫枉过正)

您的updated fiddle .

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

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

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

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