no event when loading an external page into the dom

no event when loading an external page into the dom

Ok, first off do NOT confuse my use of the word "external" with the keyword external used in <a tags. That's NOT what this is about!

I have a multiple page document and everything there works fine.  I also have several other .html pages that are rarely ever used so I don't want to clutter the dom with them.

An example would be the about.html page. When loaded, this page will (or should) give some info about the device it's running on as well as the version number of my app.

So, inside my index.html I have a header with 

I have tried all of the following.
  1.   // $( "#aboutPage" ).on("pagecontainerbeforeshow", function( event ) {
      $("body").on("pagecontainerbeforeshow",
        function( event, ui ) {
            console.log("Going to: " +ui.toPage[0].id);
        });
       
      $(document).on('pagecreate', function(){
        $(':mobile-pagecontainer').on('pagecontainerbeforeshow', function(event, ui){
            alert('pagecontainerbeforeshow triggered');
            console.log("Going to: " +ui.toPage[0].id);
        });
      });
  2.   $( "#aboutPage" ).on("navigate", function( event ) {
        console.log("aboutPage Ready!");
        initMenu();
        onAboutReady();
       
        $('#aboutPage').on("swiperight", function () {
          window.location.href = 'index.html';
        }); 
      });

My anchor tag is pretty straight forward:
  1.         <a href="#homeMenu" id="menu" data-rel="popup" data-transition="slidedown" data-position-to="#position-header" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-right ui-icon-bars ui-btn-icon-right ui-btn-b">Menu</a>
            <div data-role="popup" id="homeMenu" data-theme="b">       
              <ul data-role="listview" data-inset="true" >

  2.            <li><a href="about.html" class="ui-icon-info">About</a></li>
  3.            .
  4.            .
  5.            .

When I run the app in a simulator, the about.html gets loaded into the dom so that part is working but not one event that I can figure out gets triggered.

I would imagine that I can't attach an event to the page from within the index.html as the page doesn't yet exist in the dom so there must be another way to attach an event that actually gets fired.

What am I missing here?