ipad上的JQM弹出问题答案

【问题标题】：JQM pop up issue on ipadipad上的JQM弹出问题
【发布时间】：2015-03-10 16:48:13
【问题描述】：

我有一个包含 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' 被折叠。单击“详细信息”按钮打开“prid”弹出窗口并正确显示内容。但是，如果我在搜索完成后展开第一个 div 'searchLY'，然后单击“详细信息”按钮，数据叠加主题更改为“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>

【问题讨论】：

你的脚本是不是像这样：jsfiddle.net/ezanker/jmLpemu5
@ezanker ：是的，几乎是相似的。

标签： jquery jquery-mobile

【解决方案1】：

解决了这个问题。

我为绑定到搜索布局 (#searchLY) 的“展开”和“折叠”的搜索结果部分 (#addButton) 触发了创建事件，从而解决了该问题。

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

【讨论】：