JQuery Live and Sort

Question

I am trying to implement drag and drop to sort data lists and update the database with the appropriate positions.

I have a working example, but when I try to use the same code in lists that were entered via ajax, the event is required, but none of its methods are fired, and the elements do not remain replaced (they change back when you release the mouse )

here is my html

<ul class='sortable'>
    <li>
        <ul>
            <li>Data</li>
            <li>Data2</li>
        </ul>
   </li>
   <li>
        <ul>
            <li>Data3</li>
            <li>Data4</li>
        </ul>
   </li>
</ul>

and then my JavaScript looks like this. I want the internal UL to be replaced. Those. lists containing li Data2, etc.

$(document).ready(function()
{
    //$(".sortable").disableSelection();
    $(".sortable").live("dblclick", function()
    {
        $(".sortable").sortable({
            update : function()
            {
                alert("update");
            }
        });
    });
});

Using an event, such as a double-click or click, was the only way to associate an event. Using sorting does not work.

Here is the code I used to try to link the element, as well as the sample above

$(document).ready(function()
{
    $(".sortable").live("sortable", function()
    {
        $(".sortable").sortable({
            update : function()
            {
                alert("update");
            }
        });
    });
});

.live(), .

, ,

$(".myLink").live("click", function()
{
    var id   = $(this).attr("id");
    var url = base_url + "admin/controller/function/" + id;

    showList(url);

    return false;
});


//loads data into the form div
function showList(url)
{
    var arr = new Array();
    $.post(url, arr, function(data)
    {
        $("#form").html(data);

    }, "text");
}

.

Answer 1

, , , , . , , . , .

display: inline . , -, .

.

Answer 2

[]

AJAX $("#form").html(data); :

$("#form").html(data).find('.sortable').sortable(originalOptions);

sortable() ( ) - :

var originalOptions = { update: function(){ alert('click');}  };
$(".sortable").sortable( originalOptions );

, originalOptions showList.

[ ]

refresh . , , $.post :

$.post('/url', { new_positions: whatever }, function(data){
  // data = a bunch of 'lis' but no 'ul'
  $('.sortable').html(data).sortable('refresh');
}, 'html');

li , refresh .