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之后包含对$(".delete").remove();的调用。这将不会涵盖从列表中删除任何时候元素：如果这确实是您的意图那么您我必须使用像@pmich35 answer这样的东西（虽然它确实意味着updatePosition将被调用每个$.remove调用，或者列表中的任何元素，从那时起 - 有点矫枉过正）

您的updated fiddle。

编辑：$.sortable目前没有符合您目的的“删除”事件 - 此处的删除事件仅涵盖用户拖动列表项的特定情况您的列表到另一个可排序列表。 Sortable实际上并不是一直跟踪您的列表项目 - 它不关心您是否以编程方式添加或删除项目 - 它只会促进用户拖动事件。它实际上并不像它那样执行任何“排序”，并且排序的所有外观都是jQuery拉动DOM元素以形成它的对象的方式（如果你将列表项缓存在jQuery对象中，然后拖动排序项，缓存列表项的顺序将与之前相同。由于“排序”只是功能的错觉，它“无法”主动跟踪追加/删除。

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

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

这也可以实现你的目标，但仍然不是你想要的“干净”方式。在jQuery UI 1.10.3中添加了关于常规元素的'remove'事件（因此jsfiddle不会覆盖它，它们只会达到1.9.2），并且只要有任何当前的，就会调用updatePosition或者未来列表项已删除（来自DOM - 拖动的删除仍然被$.sortable的删除事件捕获。）

Answer 2

你可以覆盖删除功能，但是它不是很优化：

(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);
    });
}

从Jquery UI中删除项目可排序

2 个答案: