jQuery Sortable 新添加的元素无法识别答案

【问题标题】：jQuery Sortable Newly appended elements not recognizedjQuery Sortable 新添加的元素无法识别
【发布时间】：2011-07-29 14:56:50
【问题描述】：

jQuery UI 可排序方法refresh 是如何工作的。我有多个span 标签，里面有P 标签。 P 标签可以从一个span 排序到另一个。但是，当我添加一个带有 p 标签的新跨度时，新的 P 标签无法识别。刷新方法应该使新添加的可识别。但它似乎没有工作或做任何事情。 $('span').sortable('refresh').

查看http://jsfiddle.net/ySP96/2/

【问题讨论】：

标签： jquery jquery-ui refresh jquery-ui-sortable

【解决方案1】：

我认为问题在于refresh 只查找您已经使用.sortable() 初始化的容器的子元素。您正在添加子元素和容器，因此您需要使用 .sortable() 初始化这些新容器，而不是使用 .sortable('refresh')。

$('#span').click(function() {
    var x = '<span><p>NEW Span</p></span>';
    $(x).appendTo('#form').sortable({connectWith: 'span'});
});

查看更新后的演示：http://jsfiddle.net/ySP96/3/。

【讨论】：

谢谢。但是刷新的目的是什么。这就是我想知道的。给我一个如何使用刷新的例子。

【解决方案2】：

您必须手动执行以下操作：

$("#MyList").sortable({
        update: function() {
            var postData = $(this).sortable("serialize");
            $.post("UpdateItemOrder.aspx", postData, function(theResponse) {
                $("#ResultsArea").html(theResponse);
            });
        },
        beforeStop: function(event, ui) {
            // Handle new items only
            if ($(ui.item).hasClass("new-item")) {
                // Refresh the list
                var postData = $("#MyList").sortable("serialize");
                    $.post("UpdateItemOrder.aspx", postData, function(theResponse) {
                        $("#ResultsArea").html(theResponse);
                    });
            }
        });
});

【讨论】：