JQuery Mobile 1.4.0 - 面板很可爱，但表单不适用

Question

我刚刚掌握了JQuery 1.4.0，看起来好于1.3

然而，我遇到了一个真正的耻辱问题。小组在这方面非常好，我试图在小组中设置一些设置。我想使用Flipswitch，无法理解我做错了什么。这是我的代码。

    <div data-role="page" id="page1">
    <div data-role="header" style="overflow:hidden;">
    <h1>My Health Stats</h1>
         <a href="#mypanel1" data-icon="gear" class="ui-btn-left">Options</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" data-icon="user" data-transition="none">User</a>        </li>
                <li><a href="#page2" data-icon="heart" data-transition="none">Obs</a>    </li>
                <li><a href="#page3" data-icon="calendar" data-    transition="none">Trend</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->
    <div role="main" class="ui-content">
            <p>Trends</p>
            <form>
                <input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox">
            </form>
    </div><!-- /content --> 
</div><!-- /page1 -->     

<div data-role="panel" data-theme="b" id="mypanel1">
    <div data-role="header" style="overflow:hidden;">   
        <h2>Settings</h2><hr><p>
        <b>Units</b><p>
        <form>
            <label for="flip-checkbox">Flip toggle switch checkbox:</label>
            <input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox" checked="">
        </form>
        <p>
            <button class="ui-btn ui-icon-carat-r ui-btn-icon-right" data-rel="close">Close</button>


    </div>      
</div><!-- /panel -->

页面中的Flipswitch工作正常。但在面板中，它只是一个普通的复选框。