Jquery UI 可排序序列化列表故障

Question

我想动态创建一个列表并使其可排序。

我的第一次尝试不包括列表数据的动态加载。我在这里找到了一个基本示例：

http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/

当“列表”选择元素发生变化时，我检索选择的整数值以检索与所选列表关联的任务。

这是我目前所拥有的。在 Firebug 中，列表在加载后结构正确。我认为问题在于我试图在 getJSON 调用中创建列表后使其“可排序”。

我尝试在 JSON 调用内外移动“// 将我们的 listdiv ul 设置为可排序和填充”代码，但仍在 select onChange 事件中。

列表已显示，但不可排序。没有错误。困惑。 :0

$(document).ready(function(){ 

// our global buildlist var
var buildlist;  




$('#lists').change(function(){

    var selected = $("#lists option:selected");
    var listval = selected.val();
    buildlist = "<ul>";

    $.getJSON('getlist.php?cid='+listval, function(data) {

        for(var i =0;i<data.length;i++)
        {
            var item = data[i];

    //      alert(item.id+","+item.cid+","+item.task+","+item.position);

            buildlist = buildlist + "<li id='listtasks_"+item.id+"'>"+item.task+"</li>";
        } 
        buildlist = buildlist + "</ul>";

    $("#listdiv").html(buildlist);

       });  // end getJSON

// set our listdiv ul as sortable and stuff
    $("#listdiv ul").sortable({ opacity: 0.6, cursor: 'move', update: function(){
        var order = $(this).sortable("serialize") + '&action=update'; 
        $.post("updatelist.php", order, function(){
        });                                                              
    }                                 
    });


});  // end of change lists select box

}); // end doc ready

这是加载列表后的html

<div id="listdiv">
<ul>
<li id="listtasks_1">this is item 1</li>
<li id="listtasks_2">this is item 2</li>
<li id="listtasks_3">this is item 3</li>
<li id="listtasks_4">this is item 4</li>
<li id="listtasks_5">this is itme 5 </li>
</ul>
</div>

Answer 1

您需要在构建列表后，在您的获​​取成功函数中实例化sortable。现在你是在实际构建 HTML 之前做的，所以没有对象可以排序。

Answer 2

它应该放在您的getJSON 回调中。我知道你说你已经尝试过了，但至少你现在的代码肯定是有问题的。更改后，它对我有用：Demo。

如果这确实不能解决您的问题，那么问题一定出在其他地方。我们可能需要查看更多代码。