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>
...

データベースからロードされる$（'＃screen-page'）。append（html）を使用して、「screen-page」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 に答える