JQM在ipad上弹出问题

Question

我有一页有两个可折叠的div。用户在第一个div中提供了一些搜索条件，下面的搜索结果被动态地附加到第二个可折叠div (plistviewid)：

<div><a href='#prid' data-role='button' data-rel='popup' data-icon='plus' data-iconpos='notext' data-theme='c' data-inline='true' data-transition='flip'>Details</a></div>

下面弹出的是div 'addButton'：

<div data-role='popup' id='prid' data-theme='c' data-overlay-theme='a' class='ui-content' data-position-to='window'>
  <p><div style='font-weight: bold;'>ISBN:</div>12345</p>
</div>

搜索后，div 'addButton‘的样式更改为dispaly:块和第一个div 'searchLY’折叠。点击‘细节’按钮打开'prid‘弹出和内容正确显示。但是，如果我在搜索完成后展开第一个div 'searchLY‘，然后单击'Details’按钮，数据覆盖主题将更改为'a‘，但弹出的内容不会显示。这种行为只在iPad中被观察到。如果我在桌面浏览器上测试它，它可以正常工作。

页面：

<div data-role="page">
 <div data-role="content">
  <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c" id="searchLY">
   <label for="ISBN" class="AuthorL" id="AuthorL">ISBN:</label>
   <input id="ISBN" type="text" data-mini="true"  name="ISBN" value=""/>
   <a href="javascript:searchProducts();" data-role="button" data-inline="true" data-mini="true" data-theme="b" id="searchButton">Search</a>
  </div>
 <div  id="addButton" style="display:none">
  <div data-role="content">
   <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
    <h3><div style="white-space:normal">Products</div></h3>
    <div data-role="content">      
       <ul id="plistviewid" data-role="listview">     
       </ul>           
     </div>
  </div>
 </div>  
</div> 

​

​

Answer 1

解决了这个问题。

我触发了部分(#addButton)，绑定到搜索布局的“展开”和“折叠”(#searchLY)，解决了这个问题。

$("#searchLY").bind('expand', function () {
          $('#plistviewid').trigger('create');
          $('#addButton').trigger('create');
}).bind('collapse', function () {
          $('#plistviewid').trigger('create');
          $('#addButton').trigger('create');
});