1

Javascript を使用して jQuery Mobile 要素をいくつか生成しようとしています。JavaScript が実行され、生成された要素がmyTestdiv に配置された後、スタイリングとスクリプトは静的コンテンツにあるため、添付されません。生成されたコードで jQuery を実行する方法はありますか?

次に例を示します。

マークアップ:

<!-- Does not look correct when populated -->
<div id="myTest">
</div>

<!-- Looks correct -->
<div data-role="collapsible-set" data-theme="d" data-content-theme="d" data-mini="true" data-corners="false">
  <div data-role="collapsible">
    <h3>Test</h3>
  </div>
</div>

脚本：

$(document).ready(onloadFunc);

function onloadFunc() {
  var parent = $('<div data-role="collapsible-set" data-theme="d" data-content-theme="d" data-mini="true" data-corners="false">');
  var item = $("<h3>").html("test");
  parent.append(item);
  $("#myTest").append(parent);
}

jsfiddle へのリンク: http://jsfiddle.net/DcFhj/

4

1 に答える 1

3

まず、マークアップが実際にはわずかにずれています。collapsible-setウィジェットは、その中にいくつかの折りたたみ可能なウィジェットを含めることを意図しています。

例（ドキュメントから取得）

<div data-role="collapsible-set">
  <div data-role="collapsible" data-collapsed="false">
  <h3>Section 1</h3>
   <p>I'm the collapsible set content for section 1.</p>
   </div>
   <div data-role="collapsible">
    <h3>Section 2</h3>
    <p>I'm the collapsible set content for section 2.</p>
    </div>
</div>

jQuery Mobile ドキュメントから次の質問を見てください。基本的に、動的に挿入されるマークアップを強化するには、マークアップでウィジェットを初期化するかcreate、親要素でイベントをトリガーして jQuery Mobile で適切なウィジェットをすべて初期化する必要があります。

この場合、ウィジェットが 1 つしかないので、折りたたみ可能なウィジェットを初期化するだけで済みます (また、これは現在のマークアップで十分に機能します)。

$("#myTest").append(parent).find('div').collapsible();

http://jsfiddle.net/DcFhj/3/

たとえば、拡張が必要な​​ウィジェットがいくつかある場合 (または簡単にするため)、代わりに create メソッドをトリガーすることができます (これは現在のマークアップでは機能しませんが、修正すれば機能するはずです)。

 $("#myTest").append(parent).trigger('create');

http://jsfiddle.net/DcFhj/4/

于 2013-07-30T18:21:05.877 に答える