jQuery Sortable Newly appended elements not recognized

How does jQuery UI sortable method refresh works. I have Multiple span tag with P tags inside. The P tags are sortable fr开发者_运维百科om one span to another. However when i add a new span with p tags inside, the new P tags are not recognized. The refresh method is supposed to make newly added recognizable. but it doesn't seem to be working or doing anything. $('span').sortable('refresh').

Check http://jsfiddle.net/ySP96/2/

I believe the problem is that refresh is looking for child elements of only the containers you have already initialised with .sortable(). You're adding both child elements and containers, so you need to initialise those new containers with .sortable(), instead of using .sortable('refresh').

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

See the updated demo: http://jsfiddle.net/ySP96/3/.

You have to do it manually as below:

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