title: Jquery load not working properly on click
body: <p>This is what I'm loading HTML into...</p>
  
  <pre><code>&lt;div id="AJAX_Parent" class="visibleBorderThick"&gt;
      &lt;div id="AJAX_Child"&gt;
      ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the link that loads the HTML using jquery's load function.</p>
  
  <pre><code>&lt;a id="MyID_1755055367" class="dynamicLink" href="/rules"&gt; Click Me &lt;/a&gt;
  </code></pre>
  
  <p>This is the javascript that makes sure javascript and jquery are running...</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
              alert("Javascript is running");
  
              if (window.jQuery) {
                  alert("jQuery is loaded") 
              } else {
                  alert("jQuery is not loaded")
              }
  
              if ( $( "#MyID_1755055367" ).length ) {
                  alert("Found element"); /* Element is found */
                  alert( $( "#MyID_1755055367" ).length ); /* length is 1*/
              } else {
                  alert("Cannot Find Element")
              }                
  
      &lt;/script&gt;
  </code></pre>
  
  <p>This is the javascript that actually does the loading...</p>
  
  <pre><code>    $("#MyID_1755055367").onclick = (function() {
          alert("onclick activated");
          history.pushState({ linkSource: window.location.href }, "page title", "/rules");
          $("#AJAX_Parent").load("/rules #AJAX_Child");
          return false;
      });
  </code></pre>
  
  <p>^ This does not work. I am not seeing "onclick activated"</p>
  
  <p>Also, I have tried doing it like this...</p>
  
  <pre><code>            document.getElementById("MyID_1704232995").onclick = (function() {
                  alert("onclick activated");
                  history.pushState({ linkSource: window.location.href }, "page title", "/rules");
                  $("#AJAX_Parent").load("/rules #AJAX_Child");
                  return false;
              });
  </code></pre>
  
  <blockquote>
    <blockquote>
      <p>Doing it this way gives me <code>"onclick activated"</code>, and I see the URL changed and when I look at the page source in Google Chrome, I see that the HTML pertaining to <code>&lt;div id="AJAX_Child"&gt;</code> has been modified. </p>
    </blockquote>
    
    <p>That's all good, but the page doesn't render correctly (it renders flat - as if <code>AJAX_Child</code> were an empty div). NOTE: FIXED THIS "FLATTENING" BY MOVING ID INTO "". DOLLAR SIGN LOADING STILL DOESN'T WORK.</p>
  </blockquote>
  
  <p><strong>* Fixed the jquery *</strong></p>
  
  <pre><code>            $(@{ Html("\"" + "#" + uniqueID.body.substring(1)) }).click(function() {
                  alert("onclick activated");
                  history.pushState({ linkSource: window.location.href }, "page title", @quotedURL);
                  $("#AJAX_Parent").load(@{ Html(quotedURL.body.dropRight(1) + " #AJAX_Child\"") });
                  return false;
              });
  </code></pre>
  
  <p><strong>* Now forward click works, but back button not working (back button causes HTML to change inside "page source", but page remains unchanged) *</strong></p>