sortable 在 ajax 选项卡中不起作用

Question

在我的页面中，我使用prototypejs 使用Ajax 选项卡。其中一个包括一个可排序的。虽然 sortable 单独工作， 当我将它放入选项卡时，它不起作用。我怎么解决这个问题？谢谢。

我的标签如下：

<div id="container">
<div class="tabs" id="tab1">Tab 1</div>
<div class="tabs" id="tab2">Tab 2</div>
<div class="tabs" id="tab3">Tab 3</div>
</div>

我的排序列表如下：

<ul id="list">
    <li>now</li>
    <li>works</li>
    <li>this</li>
</ul>

<script type="text/javascript">
    Sortable.create("list");
</script>

我的ajax函数如下

function init () {

    var tabs = document.getElementsByClassName('tabs');
   for (var i = 0; i < tabs.length; i++) {
    $(tabs[i].id).onclick = function () {
        getTabData(this.id);
    }
}
}
function getTabData(id) {
var url = 'demos/ajax-tabs/process.php';
var rand = Math.random(9999);
var pars = 'id=' + id + '&rand=' + rand;

var myAjax = new Ajax.Request( 
        url, {
              method: 'get', 
              parameters: pars, 
              onLoading: showLoad, 
              onComplete: showResponse
              });

}
function showLoad () {
$('load').style.display = 'block';
    Sortable.create("list");

}
function showResponse (originalRequest) {
//Sortable.create("list");
var newData = originalRequest.responseText;
$('load').style.display = 'none';
$('content').innerHTML = newData;


}
init();

Answer 1

如果你调用 Sortable.create("list");函数，它将在您的页面中搜索所有 id 为“list”的元素，使它们可排序。

但是：使用 Ajax，您需要在成功加载内容后再次调用 Sortable.create()，因为您需要再次将 sortable 应用于新内容。

function showResponse (originalRequest) {
    var newData = originalRequest.responseText;
    $('load').style.display = 'none';
    $('content').innerHTML = newData;   // make sure that newData contains <ul id="list">.....</ul>
    Sortable.create("list");
}