javascript - What is the lifetime of a jQuery Mobile Widget? -


i have issue jquery mobile 1.3.1 table widget think related widget lifetime.

i'm using table widget in columntoggle mode in page. on first use of page there no issues. if navigate around site (without refreshing browser window) , go page there seem 2 instances of widget hanging around. older 1 raises error if try , resize page, think because it's attempting manipulate elements unloaded.

example code below , published in fiddle: http://jsfiddle.net/cjindustries/thqga/ (navigate page 2, resize browser. removal of elements emulates jqm unloading page.).

can explain me how jquery mobile manages widgets in general , if/how need actively destroy widgets in scenario?

thanks, chris.

<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(''); }); 


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -