jQueryMobile 1.3.1面板在使用菜单进行一些转换后不起作用

Question

使用Backbone.js的jQueryMobile 1.3.1

我最近注意到，经过一些过渡后，面板不起作用。其他事件如onclick on logohead工作，但不是面板...

这是在页面上膨胀的菜单。我在内部准备好了所有幻灯片面板：

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

}

使用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面板太重了？可能是一个更好的解决方案来创建和销毁每个面板，以及＃39; onbeforeshow＆＃39;减少内存使用量？

Answer 1

这段代码可以解决问题：

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

摘自：Closing jQuery Mobile Panel