ipad 上的 JQM 弹出问题

Question

我有一个包含 2 个可折叠 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:block，第一个div'searchLY'收起。单击 'Details' 按钮会打开 '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) 的 'expand' 和 'collapse'，解决了这个问题。

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

ipad 上的 JQM 弹出问题

JQM pop up issue on ipad

jquery

jquery-mobile