Solved: jQuery.load is ignoring the tag where to load the page into

I made the switch from using <iframe>s to use jQuery.load, and I was optimistic that life with events would be easier...

I'd prefer to keep HTML pages with mostly HTML, and keep PHP with PHP and JS with JS.
I read http://learn.jquery.com/code-organization/beware-anonymous-functions/ and like the non-anonymous idea.

1 With that goal, I have the following 'encapsulation', (see code). Is it a valid approach?
I'm putting event triggered scripts in their own functions.
2 In function LeftMargin(), why won't the selector for where to load the page work?
The page loads over/in place of the index.html page.
What's crazy, is the first line in the function works! But when I click a link it ignores the tag.

See attached image for layout.

index.html

<!DOCTYPE html>

<html>
  <head>
    <title>index page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="http://localhost/Cell_Modems/CSS/PopulateTables.css">
    
    <script type="text/javascript" src="http://localhost/Cell_Modems/javascripts/script.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    
    <script type="text/javascript">
      $(document).ready(Main);
    </script>
    
    
  </head>
  <body>
    
    <div class="header-container">
      <div class="header"> 
        <div ID="AjaxSearches"></div>
        <div ID="AjaxResults"></div> 
        <a href="../PHP/parse_form.php">Test Me</a><br>
      </div>
    </div>
    
    <div class="content" >
      
      <div class="left" ID="left_margin"></div>
      <div class="center" ID="center_body"></div>
      <div class="right" ID="right_margin"></div>
      
    </div>  <!-- CONTENT -->
        
  </body>
</html>

Open in new window

left_margin.html

<!DOCTYPE html>
<html>
  <head> 
    <title>Left Margin</title>
    <style>
      .LeftMarginHeader {
        -ms-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        transform-origin:00% 00%;
        
        position:fixed;border:1px solid black;
        width:500px;height:30px;background-color: beige;
        margin-top:507px; margin-left:0px;
        padding-left:5px; padding-top:5px; padding-bottom: -3px;
      }
      .menuheader {float:left; width:24.0%; border:1px solid red;text-align: center;}
      
      
      .LeftMarginList {
        margin-left: 0px;
        padding-right: 0px;
        overflow:hidden; background-color:#ccffcc; 
        height:800px;width: 180px;
        border: 3px solid green;
      }
    </style> 
    
    <script type="text/javascript" src="http://localhost/Cell_Modems/javascripts/script.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      $(document).ready(LeftMargin);
    </script>
    
  </head>
  
  <body style="background-color:#ccffcc;">
    <div class="LeftMarginHeader">
      <span class="menuheader" ID="LeftMargin_info"><a href="http://localhost/Cell_Modems/public_html/MarginLeft/left_margin_info.html" >Information</a></span>
      <span class="menuheader" ID="LeftMargin_import"><a href="http://localhost/Cell_Modems/public_html/MarginLeft/left_margin_import.html">Import</a></span>
      <span class="menuheader" ID="LeftMargin_report"><a href="http://localhost/Cell_Modems/public_html/MarginLeft/left_margin_report.html">Reports</a></span>
      <span class="menuheader" ID="LeftMargin_work"><a href="http://localhost/Cell_Modems/public_html/MarginLeft/left_margin_workflow.html">Workflow</a></span>
    </div>
    <div class="LeftMarginList" ID="LeftMarginList" style="padding-left:40px;">
      
    </div>
    <div ID="error"></div>
  </body>
</html>

Open in new window

script.js

// *************************************************************************************************
// MAIN Document JS / JQuery code followds *********************************************************
// *************************************************************************************************
function Main()
{
  $( "#left_margin ").load("http://localhost/Cell_Modems/public_html/MarginLeft/left_margin.html") ;
  $( "#center_body" ).load("http://localhost/Cell_Modems/public_html/table_forms/modem_config_and_activity_table.html") ;
  $( "#right_margin ").load("http://localhost/Cell_Modems/public_html/MarginRight/right_margin.html") ;
}


// =================================================================================================
function LeftMargin()
{
  $( "#LeftMarginList" ).load("http://localhost/Cell_Modems/public_html/MarginLeft/left_margin_report.html") ;
  
  $('a[href^=http://]').click(function(){
    var thislink=$(this).attr('href') ;
    $( "#LeftMarginList" ).load(thislink, function( response, status, xhr ) 
    {
      if ( status == "error" ) 
      {
        var msg = "Sorry but there was an error: ";
        $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
      }
      else
      { 
        alert("loaded okay") ;
      }
    }) ;
    return false ;
  }) // EO load page into DIV

Open in new window

window.PNG