0

我有一个带有可排序元素的页面。这是页面代码的一部分：

...
<head>
   <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
   <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
   <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"</script>
   <script>
        $(function() {
            $( ".sortable" ).sortable();
            $( ".sortable" ).disableSelection();
        });
   </script>
</head>
<div id="screen-page" data-role="page" data-theme="c">
</div>
...

我正在动态加载“屏幕页面” HTML 内容 - 使用 $('#screen-page').append(html)- 从数据库加载。这个内容是这样的：

<div data-role="header">Hello</div>
<div id="screenBody" data-role="content" class="sortable">
   (div elements)
</div>
<div id="...">...</div>

问题是：加载该内容后，“screenBody”内的元素不可排序。我认为问题是在加载页面后添加可排序的 DIV（“screenBody”），因此该脚本不适用于“新”内容。

我该如何解决这个问题？

非常感谢你！

4

2 回答 2

0

您应该$( ".sortable" ).sortable(); 在加载内容后立即致电 - 就在您$("#screen-page").append(html);致电之后。

例如，使用jQuery.get：

$.get('/get-screenpage-content.php', function(html){
   $('#screen-page').append(html);
   $('.sortable').sortable();
   $('.sortable').disableSelection();
});

你能展示你用来向你的#screen-pagediv 添加内容的代码吗？

于 2013-01-03T09:22:04.687 回答
0

解决了。我添加了这段代码：

$("#screen-page").on("DOMSubtreeModified", function() {  
    $( ".sortable" ).sortable();
    $( ".sortable" ).disableSelection();
});
于 2013-01-03T15:54:12.053 回答