1. <ul>
       <li><a href="#" onclick="loadMessage('Welcome Home')">HOME</a></li>
       <li><a href="#page1" onclick="loadRoute('page1.html')">Page1</a></li>
   </ul>
   <div id="app">
   </div>
2. <script>
   function loadRoute(url) {
       $("#app").load(url);
   }
   function loadMessage(message) {
       $("#app").text(message);
   }
   </script>

page1.html

1. <div class="tag">
      <h1>Page1</h1>
      <script>
       $(function(){
           console.log("page1 loaded!");
           $("#app").on("remove", ".tag", function(){
               console.log("page1 removed!");
           });
           $( "#app" ).on( "click", "h1", function() {
               console.log( $( this ).text() );
           });
       });
       </script>
   </div>

the template part works fine. But there are two problems in the above code:

first, after navigate between "HOME" and "Page1" links multiple times, the page1.html "h1" element will trigger multiple click events on single click.

second,

1. $("#app").on("remove", ".tag", ...)

doesn't fire when navigate from Page1 to HOME, how can i accomplish this if i want to do something when my sub page is removed/replaced?

The attached zip file contains full source code of this simple test case. It must run on a local server if you are willing to check it out.

Thanks in advance.