jQuery .load() causing method to execute multiple times...I believe

jQuery .load() causing method to execute multiple times...I believe

I have a page that when I go to it n times, the JavaScript I have attached to it gets executed n times. So, the first navigation only gets executed once and works correctly. I believe it is because I am using .load("something") is causing the JavaScript to get loaded more than once (after the first time) and then gets executed n times it is loaded. How can I get my JavaScript to load and execute only once?

The Path.map() functions you will see below is from a plugin by https://github.com/mtrpcic/pathjs, which I do not think is the problem.

More detailed explanation below:

I have a main page which the stripped down structure is

  1.     <body>
            <div id="mainContent"></div>
        </body>

When a link on the main page is clicked, this executes

  1.     // Add the hash we want that will take us to the level two page.
        window.location.href += "/" + swimlane;

which causes this previously defined method to execute

  1.     Path.map("#/:program/:swimlane").to(function () {
            var swimlane = this.params['swimlane'];
            var view = "views/" + swimlane + ".html";
            $("#mainContent").load(view);
            $("#headerLevelTwoBreadcrumbLink").load("views/breadcrumbs/breadcrumb.html");
        }).enter(setPageActions);


Once the level two page is loaded, I have many links that are attached to an event handler

  1.     $(document).on("click", ".openLevelThree", function (e) {
            page = $(this).children('a').attr('href');
  2.         var level_three_page_name = page.substring(0, page.indexOf(".htm"));
  3.         level_three_breadcrumb_name = level_three_page_name + " " + e.currentTarget.innerText;
  4.         level_three_breadcrumb = "views/breadcrumbs/breadcrumb_link.html";
  5.         var href = window.location + "";

  6.  //*************************************************************************************
     // I can put a breakpoint here (or anywhere in this method) and see this run multiple
     // times...after the first time.
     //*************************************************************************************
             window.location.href += "/" + level_three_page_name;
  7.         e.preventDefault();
        });

If I click a link the first time, I get my level three page correctly and my url looks like this

  1.     http://localhost:50715/testsite/Index.html#/rt/proposals/1.20

path.js detects the change and loads the correct page

  1.     Path.map("#/:program/:swimlane/:page").to(function () {
  2.     var url = "views/levelthree/" + this.params['page'].substring(1) + ".htm";
  3.     $.get(url)
            .done(function () {
                // Nothing here at this time...
            }).fail(function () {
                url = "views/levelthree/badurlpage.htm";
                level_three_breadcrumb_name = "Page Unavailable";
            }).always(function () {
                $("#subheader").html("");
  4.             $("#headerLevelTwoBreadcrumbLink").load(level_three_breadcrumb);
  5.             $("#headerLevelThreeBreadcrumb").html("");
  6.             $('#headerLevelThreeBreadcrumb').append('<img src="images/Chevron.gif" />');
  7.             $("#headerLevelThreeBreadcrumb").append(level_three_breadcrumb_name);
  8.             $("#mainContent").load(url);
            });
  9.     }).enter(setPageActions);

If I click my breadcrumb or use the back button to go back to my level two page (which has all the links) and click a different (or the same) link, I get a URL that looks like this


  1.     http://localhost:50715/testsite/Index.html#/rt/proposals/1.20/1.20    // Note duplicate /1.20

Which of course path.js does not have mapped because it is only looking for a page id to be there only once.

I believe it is because of my using the .load method. How can I fix this so my JavaScript only executes once?