Question

我正在为可折叠的div添加动态内容。添加时，div会折叠，但添加的内容在div之外。在chrome中使用javascript控制台，我看到在添加新内容之前div已关闭。代码如下：＆＃39;

<div data-role="collapsible" id="sendmessTMlist" data-collapsed="true">
        <h3>Select A Message</h3>
                <div data-role="collapsible" id="mymessages">
                <h3>My Messages</h3>
                <div data-role="content">My Message1<BR>
                <input data-inline="true" data-role="button" id="messageid" type="button" value="Insert" class="buttlink" />
                </div>
                </cfoutput>
           </div>

以下是我用来添加内容的jquery代码：

$("#mymessages").append('<div data-role="content">'+data.message+'<BR><input data-inline="true" data-role="button" id="'+data.message+'" type="button" value="Insert" class="buttlink" /></div>').trigger("create");

$("Selector").find('div[data-role=collapsible]').collapsible();

我尝试了很多不同的代码组合，上面是最后一遍的左边。

我的javascript中缺少什么来将其置于可折叠内？

Answer 1

简而言之，问题是您将内容附加到正确的容器之外。

事实上，jQM在增强标记的过程中会插入一个div，其中包含放置内容的类ui-collapsible-content。

鉴于您有这个初始标记

<div data-role="collapsible" id="mymessages" data-collapsed="false" data-theme="c" data-content-theme="c">
    <h3>My Messages</h3>
</div>

在jQM增强后，它看起来就是这样。

<div data-role="collapsible" id="mymessages" data-collapsed="false" data-theme="c" data-content-theme="c" class="ui-collapsible ui-collapsible-inset">
    <h3 class="ui-collapsible-heading">
    <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-up-c ui-fullsize ui-btn-icon-left ui-corner-top" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="c" data-mini="false"><span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">My Messages<span class="ui-collapsible-heading-status"> click to collapse contents</span></span><span class="ui-icon ui-icon-shadow ui-icon-minus">&nbsp;</span></span></a>
    </h3>
    <div class="ui-collapsible-content ui-body-c ui-corner-bottom" aria-hidden="false">
    </div>
</div>

看到新添加的div？

据说你需要像这样添加和刷新你的内容：

$("#mymessages div.ui-collapsible-content").append(html);
$("#mymessages").trigger("create");

以下是您的工作jsFiddle。

是的，你提供的标记中有一个拼写错误。您应该 </div> *而不是* </cfoutput>。

Answer 2

在动态添加的消息之后，它可能是<BR>标记。结束标记</cfoutput>看起来有点不合适。

Answer 3

不需要附加它，而是需要将它插入到最后一个div子元素（由JQM动态添加的元素）中，如下所示：

var data = '<div data-role="content">'+data.message+'<BR><input data-inline="true" data-role="button" id="'+data.message+'" type="button" value="Insert" class="buttlink" /></div>';
$('#sendmessTMlist div:last-child').html(data).trigger("create");

jquery mobile嵌套可折叠

3 个答案: