Question

您好我正在构建我的第一个JQuery Mobile站点。我正在使用面板进行导航。我将面板包含在每个单独的页面中，并在标题中包含一个用作面板按钮的图标。面板本身有效。但是对于面板中的一个链接，我创建了一个子菜单，作为按钮的子菜单滑出。在页面加载时，子菜单工作并滑出。但是在通过AJAX导航到另一个按钮之后，面板中的子菜单将无法刷新。

这是我的面板代码和子菜单的javascript。

    /* enhance panel and its' contents */
    $(function () {
        $("body>[data-role='panel']").panel().enhanceWithin();
    });

    /*Close all submenus once main jQM panel is closed*/
    $("#externalpanel").on("panelbeforeclose", function () {
      $('#submenu1, #submenu2')
          .addClass('ui-sub-panel-close ui-sub-panel-animate')
          .removeClass("ui-sub-panel-open");
    });
    /*Open first submenu*/
    $('.sub1').on('click', function () {
  $('#submenu1')
      .addClass('ui-sub-panel-open ui-sub-panel-animate')
      .removeClass("ui-sub-panel-close");
    });
    /*Open second submenu*/
    $('.sub2').on('click', function () {
  $('#submenu2')
     .addClass('ui-sub-panel-open ui-sub-panel-animate')
     .removeClass("ui-sub-panel-close");
    });
    /*Close Submenu where close button is clicked*/
    $('.panel-close').on('click', function () {
  $(this)
     .closest(".ui-sub-panel")
     .addClass('ui-sub-panel-close ui-sub-panel-animate')
     .removeClass("ui-sub-panel-open");
    });

<div data-role="panel" id="externalpanel" data-position="left" data-display="push" data-theme="a">

  <a class="ui-btn" style="text-align:left;" href="#">Our Doctors</a>

  <a data-ajax="true" class="sub1 ui-btn ui-icon-carat-r ui-alt-icon ui-btn-icon-right" style="text-align:left;" href="#">Our Services</a>




<!-- SubMenu 1 -->
    <div class='ui-sub-panel' id='submenu1'>

        <div class='ui-header' data-theme='b'> <a href='#' class=' ui-btn-right ui-btn-icon-notext ui-icon-delete panel-close'></a>

             <h1 class='ui-title' style="color:#fff;">Our Services</h1>

        </div> 

        <a class="ui-btn ui-btn-b" style="text-align:left; margin:0 0;" href="#">Urology</a>
        <a class="ui-btn ui-btn-b" style="text-align:left; margin:0 0;" href="#">Cancer Center</a>
        <a class="ui-btn ui-btn-b" style="text-align:left; margin:0 0;" href="#">Heart & Vascular Center</a>        
        <div class="" data-theme="b" data-iconpos="right" data-role="collapsible">
            <h4>Woman & Children <br>Services</h4>
            <ul data-theme="b" data-role="listview">
                <li><a class="" href="#">Family Birth Center</a></li>
                <li><a href="#">Mammography</a></li>
                <li><a href="#">Obstetrics & Gynecology</a></li>
                <li><a href="#">Pediatrics</a></li>
                <li><a href="#">Pediatric Endocrinology</a></li>
            </ul>
        </div>
        <a class="ui-btn ui-btn-b" style="text-align:left; margin:0 0;" href="#">Neuroscience</a>
        <a class="ui-btn ui-btn-b" style="text-align:left; margin:0 0;" href="#">Orthopedics</a>
        <a class="ui-btn ui-btn-b" style="text-align:left; margin:0 0;" href="#">Weight Loss Surgery</a>
        <a class="ui-btn ui-btn-b" style="text-align:left; margin:0 0;" href="#">Physical Rehabilitation</a>        
        <div class="" data-theme="b" data-iconpos="right" data-role="collapsible">
            <h4>Other Services</h4>
            <ul data-theme="b" data-role="listview">
                <li><a class="" href="#">Pharmacy Services</a></li>
                <li><a href="#">Blood Donor Center</a></li>
                <li><a href="#">Blood Conservation <br>Program</a></li>
                <li><a href="#">Sleep Center</a></li>
                <li><a href="#">Emergency Services</a></li>
                <li><a href="#">Carelink</a></li>
                <li><a href="#">Lifeline</a></li>
                <li><a href="#">Passport to Health</a></li>
                <li><a href="#">Volunteer Services</a></li>
            </ul>
        </div>

     </div>
    <!-- SubMenu 1 end-->    
</div>

Answer 1

修复了

的问题

$(document).on('pagehide', function (e) {
    var page = $(e.target);
    if (!$.mobile.page.prototype.options.domCache
        && (!page.attr('data-dom-cache')
            || page.attr('data-dom-cache') == "false")
        ) {
        page.remove();
    }
});

data-dom-cache="false"

AJAX加载后JQM 1.4.3刷新子菜单面板

1 个答案: