0

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

<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 中缺少什么以将其放入可折叠文件中？

4

3 回答 3

3

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

事实上，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>。

于 2013-02-10T05:46:01.967 回答
0

您需要将它插入到最后一个 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");
于 2013-07-31T17:07:19.773 回答
0

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

于 2013-02-10T05:37:41.110 回答