JqueryMobile collapsibleset 在多页中出现表列切换错误

Question

我正在构建一个 jquery 移动网站并遇到此错误。我正在使用 JqueryMobile 1.4.2 和多页。其中一个页面有一个可折叠集，在每个可折叠页面内我有一个包含列切换功能的表格。

一切正常，直到我单击关闭列切换菜单。我没有停留在同一页面，而是被重定向回第一页。

这是一个错误还是我做错了什么？

示例如下:http://jsfiddle.net/3hmea/

HTML 代码:

<div data-role="page" id="index">
    <div data-role="header" data-position="fixed">
        <h1>Page 1</h1>

    </div>
    <div data-role="content">
        This is page one
        <a href="#" id='changepage'>Click Here for page 2</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>Footer</h1>            
    </div>
</div>

<!-- Page 2 -->
<div data-role="page" id="page2">
    <div data-role="header" data-position="fixed">
        <h1>Page 2</h1>

    </div>
    <div data-role="content">
      <div data-role="collapsibleset" data-inset="false">
<div data-role="collapsible">
    <h3>Collapsible 1</h3>
    <table data-role="table" id="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a">
     <thead>
       <tr class="ui-bar-d">
         <th>Horário</th>
         <th>De</th>
         <th>Para</th>
         <th data-priority="2">Trans.</th>
         <th data-priority="1">Obs.</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th>1</th>
         <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
         <td>1941</td>
         <td>100%</td>
         <td>74</td>
       </tr>           
     </tbody>
    </table>
</div>
<div data-role="collapsible">
    <h3>Collapsible 2</h3>
    <table data-role="table" id="table1" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a">
     <thead>
       <tr class="ui-bar-d">
         <th>Horário</th>
         <th>De</th>
         <th>Para</th>
         <th data-priority="2">Trans.</th>
         <th data-priority="1">Obs.</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th>1</th>
         <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
         <td>1941</td>
         <td>100%</td>
         <td>74</td>
       </tr>           
     </tbody>
    </table>
</div>

Jquery:

$('#changepage').on('click', function() {
$(':mobile-pagecontainer').pagecontainer('change', '#page2', {
    transition: 'flip',
    changeHash: false,
    reverse: true,
    showLoadMsg: true
});
});

步骤:单击第二页的链接，然后打开可折叠按钮和“要显示的列”按钮。最后点击外部关闭菜单。

Answer 1

只需删除 changeHash : false 参数，一切都会正常工作。

工作示例:http://jsfiddle.net/d6z5y/

JavaScript:

$(document).on('vclick', '#changepage',function() {
    $(':mobile-pagecontainer').pagecontainer('change', '#page2', {
        transition: 'flip',
        reverse: true,
        showLoadMsg: true
    });
});

您需要了解 pagecontainer 仍在进行中，因此预计会出现错误。