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>

我将下方的popup添加到div＆quot; addButton＆＃39;：

<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＆＃39;改为显示：阻止和第一个div＆＃39;搜索＆＃39;崩溃了。点击＆＃39;详细信息＆＃39;按钮打开＆＃39; prid＆＃39;弹出窗口和内容正确显示。但是，如果我扩展第一个div＆＃39; searchLY＆＃39;搜索完成后，然后点击＆＃39;详细信息＆＃39;按钮，数据叠加主题更改为＆＃39; a＆＃39;但是不显示弹出窗口的内容。仅在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');
});

JQM在ipad上弹出问题

1 个答案: