JQM 1.4.3 refresh submenu panel after AJAX load

Question

Hello I am building my first JQuery Mobile site. I am using a panel for navigation. I have the panel included into each individual page and an icon that acts as the button for the panel in the header include. The panel itself works. But for one of the links in the panel I created a submenu that slides out as a submenu to the button. On page load the submenu works and slides out. But amongst navigating to another button through AJAX the submenu within the panel will not refresh.

Here is my code for the panel and javascript for the submenu.

    /* 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

Fixed the issue with

$(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"