jQuery + 可排序 + 实时答案

【问题标题】：jQuery + Sortable + livejQuery + 可排序 + 实时
【发布时间】：2010-12-12 22:22:16
【问题描述】：

我正在使用 $.get 将列表项动态添加到页面，然后将它们附加到 OL 元素。到这一步很平常。

但是当这些新项目被加载到页面中时，jQuery 并不知道它们，而且我无法使它们可排序。

我用 jQuery Live 进行了一些试验，但没有得到任何结果...

【问题讨论】：

【解决方案1】：

我找到了这个解决方案并且对我来说工作正常。

makesortable = function(){
        $( "#mylist" ).sortable({
            ...
        })
      };
...
// after list refresh :
makesortable();

【讨论】：

【解决方案2】：

在您的代码末尾附加 .sortable({}); 并重新指定所有参数。可能有一种方法可以做到这一点，而无需使用函数或其他东西复制代码，但至少这是可行的。

$('#List').live('click',function(e){

var myHTMLcode = '<li>New Item</li>'

myHTMLcode.appendTo('#List').sortable({
 items  : 'li',
 axis  : 'xy',    

 update  : function(event, ui){SPECIFIC Sortable FUNCTION CODE HERE}).fadeIn();
)};

【讨论】：

【解决方案3】：

.sortable() 的refresh 方法似乎无法识别不是通过.sortable() 函数添加的li。

尝试将您的 .sortable() 初始化代码添加到您在准备好文档时调用的函数中，并在您动态添加 li 的代码中。

代替：

jQuery(document).ready(function() {
    jQuery("#mySortableOL").sortable({
        ...
    });
}
...
jQuery("#mySortableOL").append(...);
jQuery("#mySortableOL").sortable("refresh");

尝试类似：

jQuery(document).ready(function() {
    jQuery("#mySortableOL").doSort();
}
...
jQuery("#mySortableOL").append(...);
doSort();
...
function doSort(){
    jQuery("#mySortableOL").sortable({
        ...
    });
}

【讨论】：

它不仅是 LI，它基本上是一切，但方法是正确且有效的。
完全正确的答案。谢谢你拯救了我的一天！

【解决方案4】：

您尝试过 .sortable('refresh') 吗？ http://docs.jquery.com/UI/Sortable#method-refresh

【讨论】：

为什么这不是公认的答案？这是迄今为止管理这个 ajax 问题的最简洁的方法。