jquery - .empty() を使用して div を空にすると、折りたたみ可能なリストに解析できなくなりました

Question

以下は、私が行う解析の 3 つの例です....最初のものは正常に動作しますが、追加のために長くなります....2 番目と 3 番目は、.empty のために最初のエントリのみを表示します。

私が理解しているように、最後の例は、内部の div を対象としているため、再解析する前に古いエントリをクリアする正しい方法です。

奇妙なことは、提示されたときに同じように見える要素を見ていることですが、書式設定がどこかで削除されていると仮定しています....それが見えず、2つの画面を見ている場合:)

何かご意見は ？

ティア

テラン

機能しますが、追加のために長くなります

$('#eventlist').append($('<div data-role="collapsible" data-collapsed="true">').html('<h3>'+CurrentRoadworks.dataitem.ROADMAINTENANCETYPE+' - '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FRAMEDPOINT_NAME_DESCRIPTOR_VALUE+'</h3><p>'+CurrentRoadworks.dataitem.NONGENERALPUBLICCOMMENT_COMMENT_VALUE+'</p>Number of Lanes Retricted '+CurrentRoadworks.dataitem.IMPACT_IMPACTDETAILS_NUMBEROFLANESRESTRICTED+'<br/>Expected Impact '+CurrentRoadworks.dataitem.IMPACT_IMPACTONTRAFFIC+'<br/>Expected Delay '+CurrentRoadworks.dataitem.IMPACT_DELAYS_DELAYTIMEVALUE+'<br/>Lat / Long '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LATITUDE+' / '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LONGITUDE+'<br/>Valid to  '+CurrentRoadworks.dataitem.VALIDPERIOD_ENDOFPERIOD+'</div>'));

解析すると最初のエントリのみが表示されます...

 $('#eventlist').empty.append($('<div data-role="collapsible" data-collapsed="true">').html('<h3>'+CurrentRoadworks.dataitem.ROADMAINTENANCETYPE+' - '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FRAMEDPOINT_NAME_DESCRIPTOR_VALUE+'</h3><p>'+CurrentRoadworks.dataitem.NONGENERALPUBLICCOMMENT_COMMENT_VALUE+'</p>Number of Lanes Retricted '+CurrentRoadworks.dataitem.IMPACT_IMPACTDETAILS_NUMBEROFLANESRESTRICTED+'<br/>Expected Impact '+CurrentRoadworks.dataitem.IMPACT_IMPACTONTRAFFIC+'<br/>Expected Delay '+CurrentRoadworks.dataitem.IMPACT_DELAYS_DELAYTIMEVALUE+'<br/>Lat / Long '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LATITUDE+' / '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LONGITUDE+'<br/>Valid to  '+CurrentRoadworks.dataitem.VALIDPERIOD_ENDOFPERIOD+'</div>'));

解析すると最初のエントリのみが表示されます...

$('#eventlist div').empty(); 
$('#eventlist').append($('<div data-role="collapsible" data-collapsed="true">').html('<h3>'+CurrentRoadworks.dataitem.ROADMAINTENANCETYPE+' - '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FRAMEDPOINT_NAME_DESCRIPTOR_VALUE+'</h3><p>'+CurrentRoadworks.dataitem.NONGENERALPUBLICCOMMENT_COMMENT_VALUE+'</p>Number of Lanes Retricted '+CurrentRoadworks.dataitem.IMPACT_IMPACTDETAILS_NUMBEROFLANESRESTRICTED+'<br/>Expected Impact '+CurrentRoadworks.dataitem.IMPACT_IMPACTONTRAFFIC+'<br/>Expected Delay '+CurrentRoadworks.dataitem.IMPACT_DELAYS_DELAYTIMEVALUE+'<br/>Lat / Long '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LATITUDE+' / '+CurrentRoadworks.dataitem.GOFL_LOCCGRP_TPEGILOC_FROM_POINTCOORDINATES_LONGITUDE+'<br/>Valid to  '+CurrentRoadworks.dataitem.VALIDPERIOD_ENDOFPERIOD+'</div>'));

html....

<div data-role="page" id="events">
<div data-role="header"  data-theme="a" data-backbtn="false" class="ui-header ui-bar-a">
    <h1>Events</h1>
</div>
<div data-role="navbar" data-theme="a" >    
    <ul data-role="listview">
        <li><a href="#home">Home</a></li>
        <li><a href="gmap.html" rel="external">Map</a></li>
        <li><a href="#settings">Settings</a></li>
    </ul>     
</div>
<div id="eventscontent" data-role="content" data-theme="a" ><div id="loadingeventdata" align="middle" >Data Loading.... <img src="images/ajax-loader.png" width="35" height="35" align="middle"></div>
<div id="eventlist" data-role="collapsible-set" data-theme="c" ><!--Create dynamic data via URL from GPS & other variables   --></div>
</div>