Javascript 无法选中表单底部的JQuery mobile复选框

我使用jquery mobile在弹出窗口中创建了一个表单。 这是形式代码

<div data-role="popup" id="popupDetailles" data-theme="a" data-overlay-theme="b" style="width:100%;" data-transition="pop" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow" data-dismissible="false">
        <a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <form>
            <div style="padding:0px 5px 0px 5px;">
                <h3 style="text-align: center;" id="header-popup"></h3>
                <hr width="100%" size="2" color="black">

                <h4 style="margin-bottom:0">Type de main doeuvre <span class="style2" style="color: red">*</span></h4>
                   <select name="typeMainOeuvre" data-theme="a" id="typeMainOeuvre" required>
                    </select>

                <h4 style="margin-bottom:0">Type de temps</h4>
                <select name="typeTemps" data-theme="a" id="typeTemps">
                </select>

                <div id="div_dureeTS">
                    <h4 style="margin-bottom:0">Heures de travail</h4>
                    <div align="center">
                        <input name="txtDuree" id="txtDuree" type="text" data-role="datebox" data-options='{"mode":"durationflipbox", "overrideDurationOrder": ["h", "i"], "overrideTimeFormat": 24, "maxDur":85500, "overrideDurationFormat":"%Dl:%DM", "themeButton": "b", "themeInput": "a", "theme": "a", "themeHeader": "a", "hideInput": true, "useInlineBlind":true, "useLang": "fr"}' />
                    </div>
                </div>

                <div id="div_dureeTS">
                    <h4 style="margin-bottom:0">Heure de début de la journée</h4>
                    <div align="center">
                        <input name="txtDebutJournee" id="txtDebutJournee" type="text" data-role="datebox" data-options='{"mode":"durationflipbox", "overrideDurationOrder": ["h", "i"], "overrideTimeFormat": 24, "maxDur":85500, "overrideDurationFormat":"%Dl:%DM", "themeButton": "b", "themeInput": "a", "theme": "a", "themeHeader": "a", "hideInput": true, "useInlineBlind":true, "useLang": "fr"}' />
                    </div>
                </div>


                <h4 style="margin-bottom:0">Frais de stationnement ($)</h4>
                <input name="frais_stationnement" data-theme="a" id="frais_stationnement" type="number" class="classe-frais_stationnement" min='0' max='9999999' onkeypress="return isNumberKey(event, this.id)"/>

                <h4 style="margin-bottom:0">Kilométrage (Km)</h4>

                <input name="Kilometrage" data-theme="a" id="Kilometrage"  type="number" class="classe-Kilometrage" min='0' max='9999999' onkeypress="return isNumberKey(event, this.id)"/>
                <label>
                    <input type="checkbox" id="frais_deplacement" name="frais_deplacement"> Inclure frais de déplacement CCQ (65km et plus) 
                </label>

                <h4 style="margin-bottom:0">Commentaire</h4>
                <textarea name="textarea" data-theme="a" id="txtCommentTimeSheet"></textarea>

                <div align="center">
                    <button type="button" data-icon="check" data-position="fixed" data-inline="true" data-theme="b" class="buttonBlue" id="btnSaveHeures">Sauvegarder</button>
                </div>
            </div>

        </form>
    </div>

这里的问题是，我无法选中frais_deplacement复选框，当我尝试检查它时。它让我跳到页面顶部。

在页面外部创建弹出窗口，并用代码初始化它：

$document.readyfunction{ $popupDetailles.enhanceWithin.popup； }; .ui弹出窗口{ 填充：0.5em；//一些空气 } 德梅因·杜维尔型* temps型 劳累之乡 我的工作很忙 弗赖斯车站$ 公里 包括美国东部65公里及以上的CCQ安置区 评论 索维加德

---

为什么在jquery mobile中会出现这种情况？嗯，对话框页面更适合于许多控件和用户交互，弹出窗口仅用于小提示或帮助信息。-如果对弹出窗口进行对焦，默认情况下，对焦将转到该弹出窗口内的第一个可对焦控件，从顶部开始。