javascript - JQuery Live 和可排序

Question

我正在尝试实现拖放操作，以便对数据列表进行排序并使用相关位置更新数据库。

我有一个工作示例，但是当我尝试在通过 ajax 引入的列表上使用相同的代码时，事件是绑定(bind)的，但它的任何方法都没有被触发，并且项目不会保持交换状态，(当你放开鼠标)

这是我的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");
            }
        });
    });
});

使用像双击或单击这样的事件是我可以让事件完全绑定(bind)的唯一方法。使用 sortable 无效。

这是我用来尝试绑定(bind)元素的代码以及上面的示例

$(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

[更新]

将您的 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 应该会重新绑定(bind)并接受新项目。