在浏览器中打开index.html时，jQuery代码将无法运行。 控制台中没有错误

Question

I just can't get a very simple toggleClass() to work and I can't figure out why. It's actually just an exercise to get started with jQuery. It works fine here as a snippet and when I enter it manually in the console just not when I open the index.html file from my computer in Chrome or Firefox. When I then enter the jQuery manually in the console, it works, too! The files are all linked properly, I've confirmed via alert. The div appears red and won't change colour when hovered. Any suggestions??

 $('.test').hover( function() { $(this).toggleClass('testhover'); }); 

  .test { width: 100px; height: 100px; background-color: red; } .testhover { background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test"></div> 

Answer 1

that is because you insert your script BEFORE the .test element. While the DOM loads, it first executes your script, and then adds div.test.

<div class="test"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

this will solve it