Question

我遇到了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('');
});

jQuery Mobile Widget的生命周期是多少？

0 个答案: