jQuery Mobile的嵌套的可折叠

我加入动态内容到一个可折叠的股利。添加时，div会折叠，但添加的内容不在div内。在Chrome中使用javascript控制台时，我看到在添加新内容之前div已关闭。代码如下：”jQuery Mobile的嵌套的可折叠

<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缺少把那个可折叠里面？

来源

2013-02-10 user1968854

这种似乎是一个CSS问题给我。 – 2013-02-10 04:00:46

这可能是被动态添加，是造成它的消息后，<BR>标签。结束标签</cfoutput>看起来有点不合适。

来源

2013-02-10 05:37:41

总而言之，问题在于您将内容追加到正确的容器之外。

问题的实质是，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-10 05:46:01 peterm

@ user1968854有帮助吗？你的问题需要更多帮助吗？ – peterm 2013-02-14 20:13:02

而是其附加的，你需要将其插入到最后一个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-31 17:07:19 lenuhc

jQuery Mobile的嵌套的可折叠

回答

相关问题