加载ajax时jquery可排序不起作用答案

【问题标题】：jquery sortable not functioning when ajax loaded加载ajax时jquery可排序不起作用
【发布时间】：2014-09-11 13:43:28
【问题描述】：

如果加载静态，我会运行此代码。

HTML

<div class="control-group" id="example-2-1">
    <div class="span3">
        <ul class="sortable-list">
        </ul>
    </div>
</div>

JQUERY

// Example 2.1: Get items
$('#example-2-1 .sortable-list').sortable({
    connectWith: '#example-2-1 .sortable-list',

    receive: function(event, ui) {
        // so if > 10
        if ($(this).children().length > 1) {
            //ui.sender: will cancel the change.
            //Useful in the 'receive' callback.
            $(ui.sender).sortable('cancel');
        }
    }                   
});

但是当我使用 AJAX 运行它时，可排序不再起作用。

AJAX/远程数据

jQuery.ajax({
    type: "POST",
    url: "index.php/data/get_data/",
    success:function(response){                     

            $('#example-2-1').append ($(response).hide().fadeIn('1000000'));                                                    
    },

    error:function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
    }
});

我错过了什么？

【问题讨论】：

您使用的是哪个可排序插件？
在append之后尝试调用$( ".sortable-list" ).sortable();。

标签： jquery ajax jquery-ui-sortable

【解决方案1】：

在将内容附加到 div 后尝试调用 .sortable。

【讨论】：

【解决方案2】：

希望您的回复中有以下代码：

  <div class="span3">
    <ul class="sortable-list">
    </ul>
  </div>

如果是这样;尝试使用以下代码再次刷新它。

 $( "#example-2-1 .sortable-list" ).sortable( "refresh" );

如下：

  jQuery.ajax({
type: "POST",
url: "index.php/data/get_data/",
success:function(response){                     

        $('#example-2-1').append ($(response).hide().fadeIn('1000000'));     
        // refresh sorting here.
        $( "#example-2-1 .sortable-list" ).sortable( "refresh" );                                                
},

error:function (xhr, ajaxOptions, thrownError){
    alert(thrownError);
}

});

【讨论】：

【解决方案3】：

就在绑定动态可排序调用下面的函数之后

 $('#nestable3').nestable();

【讨论】：