dynamic添加可折叠的元素
资料来源： http : //jquerymobile.com/demos/1.0a2/#docs/content/content-collapsible.html当我手动添加这样的元素到我的代码，它显示正确。 但是当我尝试像这样使用jQuery添加它时：
$('body').append('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>'); 它只显示h3中的标题和下面的内容，所以不能作为可折叠的元素。 我该如何解决这个问题？
最简单的方法是在dynamic创build的div上调用collapsible（）方法：
$('div[data-role=collapsible]').collapsible();
来源： http : //forum.jquery.com/topic/dynamically-add-collapsible-div
这就是我所做的。 希望它有帮助
HTML
<div id="collapsibleSet" data-role="collapsible-set"> <div id="ranking1"></div> </div>
使用Javascript
$('#ranking1').replaceWith('<div id="ranking1" data-role="collapsible" data-collapsed="false">' + htmlRankings(ranking) + '</div>'); $('#collapsibleSet').find('div[data-role=collapsible]').collapsible({refresh:true});
htmlRankings（）是一个js函数，它返回可折叠div内的一些html。 它可以是这样的东西
<h3>11</h3> <span>test</span>
我认为
在设置innerhtml之后，简单地在它上面触发一个事件应该像下面那样呈现dynamic的contnet
$('#<divId or elementId').trigger("create");
这个代码是perl，你可以修改它的任何编程语言。
<a href="javascript:collapsible('$div_instance','$imageID')"> <IMG id='$imageID' SRC='$imagePath' alt='(Expand / Collaspe Section' title='Expand / Collaspe' width=10 height=10> $display_header <br/></a> <div id=$div_instance name=$div_instance style="overflow:hidden;display:$display_option;margin-left:30px; margin-top:20px;"> <-- your content --> </div> <script language="JavaScript" type="text/javascript"> <!-- function collapsible(theID,imageID) { var elemnt = document.getElementById(theID); var imageObject =document.getElementById(imageID); if(elemnt.style.display == 'block') { elemnt.style.display ='none'; imageObject.src='images/expand_icon.gif'; } else{ elemnt.style.display ='block'; imageObject.src='images/expand_icon_down.gif'; } } // --> </script>
REF： http : //www.ssiddique.info/simple-javascript-to-create-dynamic-collapsible-section.html
从jQuery的手机beta2你触发一个事件 – .trigger（'创build'）
您可以使用下面的代码刷新可折叠
$('#element').collapsibleset('refresh');
希望它有帮助
你必须将它们追加到正确的位置（例如在data-role="page"元素下），然后调用.page()来初始化你附加的内容，如下所示：
$('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>') .appendTo('#someElement').page();
你可以在这里testing一下 。
更好的是updatelayout， 它在文档中 。 简而言之…
该事件由框架内的dynamic显示/隐藏内容的组件触发， 意味着通知其他组件可能需要更新其大小或位置的通用机制 。 在这个框架中，这个事件是在其内容被显示/隐藏的组件元素上触发的，并且一直到文档元素 。
$('div[data-role=collapsible]') .trigger( 'updatelayout' ); //.collapsible();
通过这种方式，您可以dynamic添加较小的可折叠的对象。 HTML：
<div data-role="collapsible" data-mini="false" data-theme="b" > <h3>main header text</h3> <div id="aCollaps"></div> </div>
使用Javascript
//Your could do for(){ $("#aCollaps").append('<div data-role="collapsible" data-inset="false" data-content-theme="b">' + '<h3>'+HeaderText+'</h3>'+ContentText+'<br/></div>'); //} //You might want to be more specific here if you have more collapsibles in the page. this just updates all collapsibles $('div[data-role=collapsible]').collapsible({refresh:true});
这里是我做了什么dynamic更改我的可折叠的例子。 我有几个数组，我需要显示为标题，然后我需要一个网格在每个可折叠的两侧，一个问题和一个答案。
var inputList = ''; var count = 0; var divnum = 999; var collit = 'false'; inputList += '<div data-role="content">'; inputList += '<div id="fb_showings_collapse" data-role="collapsible-set" data-theme="b">'; $.each(fbFullStrArray, function(index, item) { //set questions and answers for each appt getsetApptFback(fbStrApptArray[index]); //write the html to append when done inputList += '<div data-role="collapsible" data-collapsed="'+collit+'">'; inputList += '<h3>'+fbFullStrArray[index]+'</h3>'; inputList += '<div id="g'+divnum+'" class="ui-grid-a">'; inputList += '<div id="gb'+divnum+'" class="ui-block-a">'; inputList += '<div id="fbq'+index+'"><ol>'; $.each(fbQidArray, function(ind,it) { inputList += '<li>'+fbQuestionArray[ind]+'<b></b></li>'; }); inputList += '</ol></div></div>' inputList += '<div id="ga'+divnum+'" class="ui-block-b">'; inputList += '<div id="fba'+index+'"><ul>'; $.each(fbQidArray, function(ind,it){ inputList += '<li>'+fbAnswerArray[ind]+'<b></b></li>'; }); inputList += '</ul></div></div></div></div>'; collit = "true"; divnum++; count++; }); inputList += '</div></div>'; $('#fb_showings_collapse [role=collapsible-set]').text(''); $('#fb_showings_collapse [role=collapsible]').text(''); if (count > 0) { $('#fb_showings_collapse [role=collapsible]').remove(); $('#fb_showings_collapse').append(inputList).collapsibleset('refresh'); } else if (count == 0){ inputList = 'Sorry! No Showings To Show Feedback For!'; $('#fb_showings_collapse [role=collapsible-set').remove(); $('#fb_showings_collapse [role=collapsible]').text(inputList); }
请参阅enhanceWithin()函数： jQuery Mobile文档：enhanceWithin
在表示DOM元素的父节点的jQuery对象上调用enhanceWithin ，以便将任何jQuery Mobilefunction添加到您的HTML中。
在这种情况下：
jQuery('[data-role="collapsible"]').parent().enhanceWithin();
请注意 ，如果添加多个jQuery Mobile小部件，则可能只需要在添加所有dynamicHTML之后，在“BODY”之类的祖先上调用enhanceWithin 。
这对于这个问题来说也是一个很好的解决scheme： 在将jQuerydynamic添加到jquery mobile之后刷新一个部分
