動的な折りたたみ可能なdivを追加するJquerymobile [重複]

Question

重複の可能性：
折りたたみ可能な要素を動的に追加する

折りたたみ可能なdivを動的に追加する方法を知りたいのですが、そのようなことはJqmリストビューで実行できます。

テストコードは次のとおりです：

http://jsfiddle.net/ca11111/UQWFJ/5/

編集：上記では、追加およびレンダリングされていますが、複数回

edit2：このように機能しているようですか？

Answer 1

要素を初期化する（更新しない）ため、refreshを省略してはどうでしょうか： ジェネラコディセタグプレ

JSFiddleの更新バージョンは次のとおりです。 http://jsfiddle.net/UQWFJ/7/ （DOMに新しい要素を継続的に追加するために、setTimeoutをsetIntervalに変更したことに注意してください）

また、新しい要素を変数に保存して、その要素だけで.collabsible()を呼び出すことで、これを最適化することもできます。 ジェネラコディセタグプレ

この最適化を使用したJSFiddleは次のとおりです。 http://jsfiddle.net/UQWFJ/9/

Answer 2

jQMドキュメント：

• http://jquerymobile.com/demos/1.0。 1 / docs / pages / page-scripting.html

  新しいマークアップの強化
  ページプラグインは、ほとんどのウィジェットが自身を自動初期化するために使用するpagecreateイベントをディスパッチします。限り ウィジェットプラグインスクリプトが参照されると、自動的に拡張されます ページ上で見つかったウィジェットのインスタンス。

  ただし、クライアント側で新しいマークアップを生成したり、を介してコンテンツを読み込んだりする場合 Ajaxを使用してページに挿入すると、createイベントをトリガーして に含まれるすべてのプラグインの自動初期化を処理します 新しいマークアップ。これは、任意の要素（ページも含む）でトリガーできます div自体）、各プラグインを手動で初期化するタスクを節約します （リストビューボタン、選択など）。

  たとえば、HTMLマークアップのブロック（ログインフォームなど）が読み込まれた場合 Ajaxを介して、createイベントをトリガーして自動的に変換します 含まれているすべてのウィジェット（この場合は入力とボタン）を 拡張バージョン。このシナリオのコードは次のようになります。 ジェネラコディセタグプレ

Answer 3

I'm not sure if this is what you want, but if all you want to do is to be able to dynamically add collapsible divs, you can do this on the code side. For example I use aspx.vb but if you use some other language than you can easily adapt this for your situation. In your .aspx(html code) write this line of code where you want your dynamic html code to appear.

<asp:Literal ID="CollapseMe" runat="server"></asp:Literal>

Once this is done, right click on the screen and choose "view code"

Then you add this

Protected Sub page_load(ByVal Sender As System.Object, ByVal e As System.EventArgs) Handles    MyBase.Load

Dynamic()

End Sub 



Public Sub Dynamic()
    Dim strHtml As New StringBuilder
    Dim strJava As New StringBuilder
    Dim dblNumCollapsibles As New Double

    dblNumCollapsibles = 7

    For i = 1 To dblNumCollapsibles

        strHtml.Append("<div data-role=""collapsible"" data-theme=""c"" data-collapsed=""false"">" _
                                        & "<h3>Title of Collapsible</h3>" _
                                        & "<p data-theme=""a"" style=""white-space: normal;"">" _
                                        & "The text inside of the Collapsible" _
                                        & "</p>" _
                                    & "</div>")


    Next

    Me.CollapseMe.Text = strHtml.ToString

This will dynamically add 7 Collapsible div listbars. You can alter this by changing "dblNumCollapsibles"

Answer 4

create html of Collapsible div dynamically add to some div and on that div call .trigger('create') $(div).trigger('create') this will create that div and renders the collapsible div