Question

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

我的标签如下：

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

sortable在ajax选项卡中不起作用

1 个答案: