title: Ajax .load() function not working
body: <p><strong>.load() only works on files coming from a server, so it will work later as I'm going to put this on a server</strong></p>
  
  <p><strong>Edit: This code works on firefox but not on chrome</strong></p>
  
  <p>I've been trying to use ajax to load a webpage after selecting an option but the script doesn't even seem to load</p>
  
  <p>here's the script + html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;head&gt;
   &lt;meta charset="utf-8" /&gt;
   &lt;link rel="stylesheet" href="DaVinciRace.css" /&gt;
   &lt;title&gt; Da Vinci Race 2014-2015 &lt;/title&gt;
   
   &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" &gt;&lt;/script&gt;
   
  &lt;/head&gt;
  
  &lt;body style="background:#f2f2f2;"&gt;
  
  &lt;div id="logo"&gt;
   &lt;img src="Resources\DVRLogo.png"/&gt;
   &lt;!-- &lt;p class="text"&gt;Da Vinci Race&lt;/p&gt; --&gt;
  &lt;/div&gt;
  
  &lt;div id="options" style="background:#0c0c0c; float:right;"&gt;
   &lt;div class="menu"&gt;
    &lt;div class="chronometre" &gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;div id="DVRChrono"&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
   $(document).ready(function(){
    $("#options").on("click", ".chronometre", function() {
     $( "#DVRChrono" ).load( "Chronometre.html" );
    })
   });
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the document "Chronometre.html" is in the same folder as this html page</p>
  
  <p>I feel like I'm missing something obvious but can't for the life of me figure out what it is</p>