Свернуть набор JqueryMobile с ошибкой переключения столбцов таблицы в многостраничном режиме

Question

Я создаю мобильный сайт jquery и столкнулся с этой ошибкой. Я использую JqueryMobile 1.4.2 и многостраничный. На одной из страниц есть Collapsibleset, и внутри каждой разборной у меня есть таблица, содержащая функцию переключения столбцов.

Все работает нормально, пока я не нажму, чтобы закрыть меню columtoggle. Вместо того, чтобы оставаться на той же странице, я перенаправлен обратно на первую страницу.

Это ошибка или я что-то не так делаю?

Вот пример: 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 все еще находится в стадии разработки, поэтому следует ожидать ошибки.