Jquery mobile jQueryMobile 1.3.1面板在使用菜单进行某些转换后不工作

jQueryMobile 1.3.1，带Backbone.js

我最近注意到，经过一些转换后，面板无法工作。其他事件如onclick on logohead工作，但不包括面板

这是在每一页上膨胀的菜单。我填充OnDevicerady内的所有滑动面板：

function cargarMenu() {
//Inserta el menú de la aplicación
var text = 
   "<ul data-role='listview' data-divider-theme='h' data-inset='false' data-icon='false' > \
        <li data-role='list-divider' role='heading' id='menu_title' > \
            Wellcome on board Paul \
        </li> \
        <li data-theme='g'> \
            <a href='#HomePage2' data-transition='slide'> \
                <img src='Imagenes/ico_menu_home2.png' class='ui-li-icon'>{0} \
            </a> \
        </li> \
        <li data-theme='g'> \
            <a href='#HomePage' data-transition='slide'> \
                <img src='Imagenes/ico_menu_next.png' class='ui-li-icon'>{1} \
                <span class='ui-li-count' id='timeToNext'> \
                    in 01:45 \
                </span> \
            </a> \
        </li> \
        <li data-theme='g'> \
            <a href='#RecordListPage' data-transition='slide'> \
                <img src='Imagenes/ico_menu_record.png' class='ui-li-icon'>{2} \
            </a> \
        </li> \
        <li data-theme='g'> \
            <a href='#ChartsPage' data-transition='slide'> \
                <img src='Imagenes/ico_menu_chart.png' class='ui-li-icon'>{3} \
            </a> \
        </li> \
        <li id='menu_messages' data-theme='g'> \
            <a href='#MessagesPage' data-transition='slide'> \
                <img src='Imagenes/ico_menu_messages.png' class='ui-li-icon'>{4} \
                <span class='ui-li-count' id='menu_numMsg'> \
                    0 \
                </span> \
            </a> \
        </li> \
        <li id='menu_library' data-theme='g'> \
            <a onclick='app.util.extLibrary()'> \
                <img src='Imagenes/ico_menu_library.png' class='ui-li-icon'>{5} \
            </a> \
        </li> \
        <li id='menu_surveys' data-theme='g'> \
            <a href='#SurveysPage' data-transition='slide'> \
                <img src='Imagenes/ico_menu_surveys.png' class='ui-li-icon'>{6} \
                <span class='ui-li-count' id='menu_numSrv'> \
                    0 \
                </span> \
            </a> \
        </li> \
        <li data-theme='g'> \
            <a href='#MyProfilePage' data-transition='slide'> \
                <img src='Imagenes/ico_menu_profile.png' class='ui-li-icon'>{7} \
            </a> \
        </li> \
        <li data-theme='g'> \
            <a href='#InjectionListPage' data-transition='slide'> \
                <img src='Imagenes/ico_menu_schedule.png' class='ui-li-icon'>{8} \
            </a> \
        </li> \
        <li data-theme='g'> \
            <a href='#SettingsPage' data-transition='slide'> \
                <img src='Imagenes/ico_menu_settings.png' class='ui-li-icon'>{9} \
            </a> \
        </li> \
        <li data-theme='g'> \
            <a href='#FaqPage' data-transition='slide'> \
                <img src='Imagenes/ico_menu_help.png' class='ui-li-icon'>{10} \
            </a> \
        </li> \
        <li id='menu_logOff' data-theme='g'> \
            <a href='#LoginPage' data-transition='slide'> \
                <img src='Imagenes/ico_menu_logoff.png' class='ui-li-icon'>{11} \
            </a> \
        </li> \
        <li id='menu_logIn' data-theme='g'> \
            <a href='#LoginPage' data-transition='slide'> \
                <img src='Imagenes/ico_menu_signin.png' class='ui-li-icon'>{12} \
            </a> \
        </li> \
    </ul>";

text = app.util.I18n.format(
    text,
    app.util.I18n.translate('menu_Home'),
    app.util.I18n.translate('menu_nextInjection'),
    app.util.I18n.translate('menu_recordedInjection'),
    app.util.I18n.translate('menu_charts'),
    app.util.I18n.translate('menu_messages'),
    app.util.I18n.translate('menu_library'),
    app.util.I18n.translate('menu_surveys'),
    app.util.I18n.translate('menu_myProfile'),
    app.util.I18n.translate('menu_dailyInjection'),
    app.util.I18n.translate('menu_settings'),
    app.util.I18n.translate('menu_faq'),
    app.util.I18n.translate('menu_logoff'),
    app.util.I18n.translate('menu_logIn')
);
$(".logoHead").on("click", function(){ $.mobile.changePage("#HomePage2", {changeHash: true}); });
$("[name='menu']").html(text);

// Log off
$("[name='menu'] #menu_logOff a").click(function(event) {
    showMenuOptionsForLoggedUser(false);
    localStorage.setItem("user", '');
    localStorage.setItem("pass", '');
});
showMenuOptionsForLoggedUser(false);

// Actualizamos titulo del menu
updateMenuTitle();

函数cargarMenu（）{
//阿皮利卡翁公寓
变量文本=
“
\
\
好的，来吧，保罗\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
”；
text=app.util.I18n.format(
文本，
app.util.I18n.translate（'menu_Home'），
app.util.I18n.translate（'menu_nextInjection'），
app.util.I18n.translate（'menu_recordedInjection'），
app.util.I18n.translate（“菜单图表”），
app.util.I18n.translate（“菜单消息”），
app.util.I18n.translate（“菜单库”），
app.util.I18n.translate（“菜单调查”），
app.util.I18n.translate（'menu_myProfile'），
app.util.I18n.translate（'menu_daily injection'），
app.util.I18n.translate（“菜单设置”），
app.util.I18n.translate（'menu_faq'），
app.util.I18n.translate（'menu_logoff'），
app.util.I18n.translate（'menu\u logIn'）
);
$（“.logoHead”）.on（“单击”，function（）{$.mobile.changePage（“#HomePage2”，{changeHash:true}）；}）；
$（“[name='menu']”）html（文本）；
//注销
$（“[name='menu']#menu\u注销a”）。单击（函数（事件）{
ShowMenuOptions for LoggeDuser（假）；
setItem（“用户”和“”）；
localStorage.setItem（“通过”和“”）；
});
ShowMenuOptions for LoggeDuser（假）；
//泰特罗菜单
updateNutitle（）；

}

使用jquerymobile进行转换，例如，这是panel3示例，我已经回顾了panelId在页面之间不会重复…：

    <!-- MY PROFILE -->
<div data-role="page" data-control-title="MyProfile" id="MyProfilePage">
    <div data-role="panel" id="panel3" data-position="left" data-display="reveal" data-theme="f" name="menu">
    </div>
    <div data-theme="a" data-role="header" data-position="fixed" id="header" style="z-index: 100">
        <a id="myProfile_btnDone" data-role="button" data-theme="a" data-icon="check" data-iconpos="left" class="ui-btn-right" data-corners="false">
            Done
        </a>
        <a id="menuLateral" data-controltype="panelbutton" data-role="button" data-theme="a" href="#panel3" data-icon="custom" data-iconpos="notext" class="ui-btn-left" data-corners="false">
        </a>
        <h5 class="logoHead"></h5>
    </div>
    <!-- Content -->
    <div data-role="content" style="padding: 0px">
        <div data-role="popup" name="popup_progress">
            <p style="padding: 1em;">
                <img src="css/images/progress.gif" />
            </p>
        </div>
        <div data-controltype="htmlblock">
            <div id="myProfile_lblTitle" class="cab">
                Define your profile
            </div>
        </div>
        <div data-role="fieldcontain" data-controltype="textinput" class="margenes-laterales">
            <label id="myProfile_lblFirstName" for="myProfile_txtFirstName">
                First Name
            </label>
            <input name="" id="myProfile_txtFirstName" placeholder="" value="" type="text" data-mini="true" maxlength="80" />
        </div>
        <div data-role="fieldcontain" data-controltype="textinput" class="margenes-laterales">
            <label id="myProfile_lblLastName" for="myProfile_txtLastName">
                Last Name
            </label>
            <input name="" id="myProfile_txtLastName" placeholder="" value="" type="text" data-mini="true" maxlength="80" />
        </div>
        <div data-role="fieldcontain" data-controltype="dateinput" class="margenes-laterales">
            <label id="myProfile_lblBirthDate" for="myProfile_dateBirthDay">
                Birth date
            </label>
            <input data-mini="true" class="margenes-laterales" name="" id="myProfile_dateBirthDay" placeholder="" value="" type="date" data-role="datebox" data-theme="e" data-options='{"mode": "datebox", "dateFormat": "YYYY/mm/dd", "centerHoriz": true, "useModal": "true"}'/>
        </div>
        <div data-controltype="htmlblock" class="margenes-laterales">
            <div class="flex-container">
                <div id="myProfile_lblHeight" class="flex-item itemLabelProfile">
                    Height
                </div>
                <div class="flex-item itemHeightWeight">
                    <div data-role="fieldcontain" data-controltype="textinput">
                        <input name="" id="myProfile_txtAltura" placeholder="000.00" value="" type="number" data-mini="true" />
                    </div>
                </div>
                <div class="flex-item itemUnitsProfile">
                    <div id="myProfile_radioAltura" data-role="fieldcontain" data-controltype="radiobuttons">
                        <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                            <input id="radioFt" name="radioHeight" value="ft" data-theme="a" type="radio" />
                            <label for="radioFt">
                                ft
                            </label>
                            <input id="radioCm" name="radioHeight" value="cm" data-theme="a" type="radio" />
                            <label for="radioCm">
                                cm
                            </label>
                        </fieldset>
                    </div>
                </div>
            </div>
            <div class="flex-container">
                <div id="myProfile_lblWeight" class="flex-item itemLabelProfile">
                    Weight
                </div>
                <div class="flex-item itemHeightWeight">
                    <div data-role="fieldcontain" data-controltype="textinput">
                        <input name="" id="myProfile_txtPeso" placeholder="000.00" value="" type="number" data-mini="true" />
                    </div>
                </div>
                <div class="flex-item itemUnitsProfile">
                    <div id="myProfile_radioPeso" data-role="fieldcontain" data-controltype="radiobuttons">
                        <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                            <input id="radioLb" name="radioWeight" value="lb" data-theme="a" type="radio" />
                            <label for="radioLb">
                                lb
                            </label>
                            <input id="radioKg" name="radioWeight" value="kg" data-theme="a" type="radio" />
                            <label for="radioKg">
                                kg
                            </label>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

定义您的个人资料
名字
姓
出生日期
高度
英尺
厘米
重量
磅
公斤

---

Perharps 12面板太重了？在“onbeforeshow”中创建和销毁每个面板以减少内存使用量，是一个更好的解决方案？

这段代码实现了以下目的：

$(document).on("pageinit", function () {
  $("[data-role=panel] a").on("click", function () {
    if($(this).attr("href") == "#"+$.mobile.activePage[0].id) {
      $("[data-role=panel]").panel("close");
    }
  });
}); 

---

摘自：

您确定同一面板没有多次添加到同一页面吗？如果您愿意升级到JQM 1.4，您将能够为所有页面使用一个全局面板（外部面板）。当然，相同的面板创建了12次，但这是一个问题吗？也许转换历史分配了太多内存？升级到1.4英寸，目前不在我的选项中。当从面板中的链接导航时，如果不关闭面板，可能会出现一些问题？有时某些页面显示时菜单已打开并被阻止…然后关闭面板一旦导航离开，使用

pagebeforechange

关闭活动面板。