title: .load not working for changing content of div
body: <p>I am trying to change the content of a specific div on an onclick event using .load for some reason it is not working and I do not know why. I am trying to replicate the the exact same thing that was asked in this posting <a href="https://stackoverflow.com/questions/3432553/how-to-load-replace-an-entire-div-from-an-external-html-file">https://stackoverflow.com/questions/3432553/how-to-load-replace-an-entire-div-from-an-external-html-file</a>  </p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  
  $(document).ready(function() {
  
  $('#electric').bind('click',function(){
      $("#chart_div").load("new_content.html");
   });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div id="container"&gt;
        &lt;div id="chart_div"&gt;hello&lt;/div&gt;
  &lt;/div&gt;
      &lt;ul class="nav nav-pills"&gt;
      &lt;li class="active"&gt;
      &lt;a id="electric" href="#"&gt;Electric link&lt;/a&gt;
      &lt;li class="active"&gt;
      &lt;a href="#"&gt;Gas&lt;/a&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>new_content.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Graph&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;New Content!&lt;/p&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>