Jquerymobile fügt dynamische zusammenklappbare Divs hinzu [Duplikat]

Question

Mögliches Duplikat:
Dynamisches Hinzufügen von zusammenklappbaren Elementen

Ich würde gerne wissen, wie ich ein zusammenklappbares Div dynamisch hinzufügen kann. So etwas kann mit Jqm-Listenansichten gemacht werden, die nach lisview ('refresh') aufrufen

Hier ist der Testcode:

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

Bearbeiten: Oben wird es angehängt und gerendert, jedoch mehrmals

edit2: scheint so zu funktionieren?

Answer 1

Wie wäre es, wenn Sie den refresh weglassen, da Sie das Element initialisieren (nicht aktualisieren):

$('<div data-role="collapsible" data-collapsed="true"><h3>22</h3><span>test</span></div>').appendTo($('#coll div:first'));

$('#coll').find('div[data-role=collapsible]').collapsible();  

Hier ist eine aktualisierte Version Ihrer JSFiddle: http://jsfiddle.net/UQWFJ/7/ (Beachten Sie, dass ich Ihren setTimeout in einen setInterval geändert habe, um dem DOM kontinuierlich neue Elemente hinzuzufügen.)

Sie können dies auch optimieren, indem Sie das neue Element in einer Variablen speichern, sodass Sie .collabsible() nur für dieses Element aufrufen können:

var $element = $('<div data-role="collapsible" data-collapsed="true"><h3>22</h3><span>test</span></div>').appendTo($('#coll div:first'));

$element.collapsible();  

Hier ist eine JSFiddle mit dieser Optimierung: http://jsfiddle.net/UQWFJ/9/

Answer 2

jQM-Dokumente:

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

  Verbessern des neuen Markups
  Das Seiten-Plugin löst ein Ereignis zum Erstellen von Seiten aus, das die meisten Widgets verwenden, um sich automatisch zu initialisieren. So lange Wenn auf ein Widget-Plugin-Skript verwiesen wird, wird es automatisch erweitert Alle Instanzen der Widgets, die auf der Seite gefunden werden.

  Wenn Sie jedoch clientseitig ein neues Markup generieren oder Inhalte über laden Ajax und fügen Sie es in eine Seite ein, können Sie das Erstellungsereignis auslösen Behandeln Sie die automatische Initialisierung für alle darin enthaltenen Plugins das neue Markup. Dies kann für jedes Element (auch für die Seite) ausgelöst werden div selbst) und erspart Ihnen die manuelle Initialisierung jedes Plugins (Listenansichtstaste, Auswahl usw.).

  Wenn beispielsweise ein Block mit HTML-Markup (z. B. ein Anmeldeformular) geladen wurde Lösen Sie über Ajax das Erstellungsereignis aus, um es automatisch zu transformieren Alle darin enthaltenen Widgets (Eingaben und Schaltflächen in diesem Fall) in die erweiterte Versionen. Der Code für dieses Szenario wäre:

  $( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
  

Answer 3

Ich bin mir nicht sicher, ob Sie dies möchten, aber wenn Sie nur zusammenklappbare Divs dynamisch hinzufügen möchten, können Sie dies auf der Codeseite tun.Zum Beispiel benutze ich aspx.vb, aber wenn Sie eine andere Sprache verwenden, können Sie diese leicht an Ihre Situation anpassen.Schreiben Sie in Ihre ASPX-Datei (HTML-Code) diese Codezeile, in der Ihr dynamischer HTML-Code angezeigt werden soll.

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

Klicken Sie anschließend mit der rechten Maustaste auf den Bildschirm und wählen Sie "Code anzeigen"

Dann fügen Sie dies hinzu

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

Dadurch werden dynamisch 7 zusammenklappbare Div-Listenleisten hinzugefügt.Sie können dies ändern, indem Sie "dblNumCollapsibles" ändern

Answer 4

HTML von Collapsible Div erstellen dynamisch zu Div hinzufügen und bei diesem Div .trigger aufrufen ('create') $ (div) .trigger ('create') dies erzeugt dieses div und rendert das reduzierbare div