Question

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

...
<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”），因此脚本不适用于“新”内容。

我该如何解决这个问题？

非常感谢！

Answer 1

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

例如，使用jQuery.get：

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

您是否可以展示用于向#screen-page div添加内容的代码？

Answer 2

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

$("#screen-page").on("DOMSubtreeModified", function() {  
    $( ".sortable" ).sortable();
    $( ".sortable" ).disableSelection();
});

使用Jquery添加可排序内容

2 个答案: