title: jQuery is being loaded, however, i get a "$ is not defined" error
body: <p>So, i programming a game for an assignment and i have been trying to implement keystrokes. I have managed to do so in most cases, although sometimes i get this error even though i load jquery properly (i think).
  Any idea of what might be wrong here?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width=1300 height=900&gt;
  
  &lt;image x=0 y=0 width=670 height=900 xlink:href=http://localhost/images/firstscreen.png /&gt;
  &lt;a id="single" xlink:href=http://localhost/cgi-bin/jogo?g&gt;
  &lt;image x=200 y=400 width=400 height=150 xlink:href=http://localhost/images/start_button.png /&gt;
  &lt;/a&gt;
  &lt;a id="double" xlink:href=http://localhost/cgi-bin/jogo?h&gt;
  &lt;image x=200 y=600 width=400 height=150 xlink:href=http://localhost/images/hscores.png /&gt;
  &lt;/a&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
     $(document).keydown(function(e){
      if(e.keyCode == 13) {
        e.preventDefault();
         window.location.href = document.getElementById('single').href.animVal;
       }
      if(e.keyCode == 8) {
        e.preventDefault();
         window.location.href = document.getElementById('double').href.animVal;
       }
     });
  &lt;/script&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>