1

我对 jQuery Mobile 1.3.1 表格小部件有疑问，我认为它与小部件的生命周期有关。

我在页面的 columntoggle 模式下使用表格小部件。首次使用该页面时没有问题。如果我随后浏览我的网站（不刷新浏览器窗口），然后返回页面，似乎有两个小部件实例挂在周围。如果我尝试调整页面大小，旧版本会引发错误，我认为是因为它试图操纵已卸载的元素。

示例代码如下并在此小提琴中发布：http: //jsfiddle.net/cjindustries/thqga/ （导航到第 2 页，然后调整浏览器大小。元素的删除模拟 JQM 卸载页面。）。

谁能向我解释 jQuery Mobile 一般如何管理小部件以及在这种情况下是否/如何需要主动销毁小部件？

谢谢，克里斯。

<div id="p1" data-role="page">
<table data-role="table" id="table1" data-mode="columntoggle" class="ui-responsive table-stroke">
     <thead>
       <tr>
         <th data-priority="2">Rank</th>
         <th>Movie Title</th>
         <th data-priority="3">Year</th>
         <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
         <th data-priority="5">Reviews</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>
       <tr>
     </tbody>
   </table>
    <a href="#p2" data-role="button">Page 2</a>
</div>
<div id="p2" data-role="page">
<table data-role="table" id="table2" data-mode="columntoggle" class="ui-responsive table-stroke">
     <thead>
       <tr>
         <th data-priority="2">Rank</th>
         <th>Movie Title</th>
         <th data-priority="3">Year</th>
         <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
         <th data-priority="5">Reviews</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th>7</th>
         <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
         <td>1967</td>
         <td>91%</td>
         <td>122</td>
       </tr>

     </tbody>
   </table>
    <a href="#p1" data-role="button">Page 1</a>
</div>

$(document).on('pageshow', '#p2', function () {
    $('#p1').html('');
});
4

0 回答 0