JQuery Live и сортируемый

Question

Я пытаюсь реализовать перетаскивание, чтобы можно было сортировать списки данных и обновлять базу данных соответствующими позициями.

У меня есть рабочий пример, но когда я пытаюсь использовать тот же код в списках, которые передаются через ajax, событие привязывается, но ни один из его методов не запускается, и элементы не остаются перепутанными (они меняются обратно, когда вы отпускаете мышь)

вот мой 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>

и тогда мой JavaScript выглядит так.Я хочу, чтобы были заменены только внутренние UL.Т.е. списки, содержащие li Data2 и т.д.

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

Использование такого события, как двойной щелчок или щелчок, было единственным способом вообще привязать событие.Использование сортировки не помогло.

Вот код, который я использовал, чтобы связать элемент, а также приведенный выше образец.

$(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 следует перепривязать и принять новые элементы.