Question

可能重复：
Dynamically adding collapsible elements

我想知道如何动态添加一个可折叠的div，这样可以用Jqm listviews完成，在

之后调用lisview（'refresh'）

这是测试代码：

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

编辑：在上面，它被附加和渲染，但多次

edit2：好像这样工作？

Answer 1

如果要初始化元素（不刷新它），省略refresh如何：

$('<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();

以下是您的JSFiddle的更新版本：http://jsfiddle.net/UQWFJ/7/（注意我已将您的setTimeout更改为setInterval，以便不断向DOM添加新元素）

此外，您可以通过将新元素保存在变量中来优化此功能，以便您可以仅在该元素上调用.collabsible()：

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

$element.collapsible();

这是一个带有此优化的JSFiddle：http://jsfiddle.net/UQWFJ/9/

Answer 2

jQM文档：

http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html

增强新标记
页面插件调度一个pagecreate事件，大多数小部件都使用它来自动初始化自己。只要   当引用widget插件脚本时，它会自动增强   它在页面上找到的小部件的任何实例。

但是，如果您通过生成新标记客户端或加载内容   Ajax并将其注入页面，您可以触发create事件   处理其中包含的所有插件的自动初始化   新标记。这可以在任何元素（甚至是页面）上触发   div本身），为您节省了手动初始化每个插件的任务   （列表视图按钮，选择等）。

例如，如果加载了一个HTML标记块（比如一个登录表单）   通过Ajax，触发create事件自动转换   它包含的所有小部件（在这种情况下为输入和按钮）   增强版本。此方案的代码为：
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

Answer 3

我不确定这是否是您想要的，但如果你想要做的就是能够动态添加可折叠的div，你可以在代码端执行此操作。例如，我使用aspx.vb，但如果你使用其他语言，你可以根据自己的情况轻松调整。在你的.aspx（html代码）中写下你希望动态html代码出现的代码行。

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

完成后，右键单击屏幕并选择“查看代码”

然后你添加这个

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

这将动态添加7个可折叠div列表栏。您可以通过更改“dblNumCollapsibles”

来更改此设置

Answer 4

创建可折叠div的html动态添加到某个div并在该div调用.trigger（'create'） $（div）.trigger（'create'）这将创建该div并呈现可折叠div

Jquerymobile添加动态可折叠div

4 个答案: