Question

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

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 / REMOTE DATA

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);
    }
});

我错过了什么？

Answer 1

在向div添加内容后尝试调用.sortable。

Answer 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);
}

}）;

Answer 3

将动态可排序调用绑定到函数

之后

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

当ajax加载时，jquery可排序不起作用

3 个答案: