jQuery-Code wird nicht ausgeführt, wenn index.html im Browser geöffnet ist. keine Fehler in der Konsole

Question

Ich kann einfach nicht eine sehr einfache toggleClass() zu arbeiten, und ich kann nicht herausfinden, warum. Es ist eigentlich nur eine Übung, um mit jQuery zu beginnen. Es klappt hier gut als Snippet und wenn ich es manuell in die Konsole eintrage einfach nicht wenn ich die index.html Datei von meinem Computer in Chrome oder Firefox öffne. Wenn ich dann die jQuery manuell in der Konsole eingeben, funktioniert es auch! Die Dateien sind alle korrekt verlinkt, das habe ich via Alert bestätigt. Das Div erscheint rot und ändert seine Farbe nicht, wenn es sich bewegt. Irgendwelche Vorschläge??

$('.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

das, weil Sie Ihr Skript vor dem .test Element einzufügen ist. Während das DOM geladen wird, führt es zuerst Ihr Skript aus und fügt div.test hinzu.

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

dies wird es