6

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

4

2 回答 2

4

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

你更新的小提琴。

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

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

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

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

于 2013-10-23T22:54:13.780 回答
1

您可以覆盖删除功能，尽管它不是很优化：

(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);
    });
}
于 2013-10-23T22:37:35.193 回答