JQuery addEventListener und Mouseover ausgelöst nur einmal

Question

ich diesen Code haben

var $els = document.querySelectorAll('#site-nav a'); 
for(i = 0; i < $els.length; i++) { 

     $els[i].addEventListener('mouseover', function() { 
      console.log('yessss'); 
     }); 

} 

wenn das Element mit der Maus schwebt ich die Meldung in der Konsole sehen können, aber das erste Mal nur. Mache ich etwas falsch?

dank

Answer 1

Da Sie jQuery verwenden, das einfach sein könnte:

das hilft

$('body').on('mouseover', '#site-nav a', function(){ 
    console.log('yessss'); 
}); 

Hoffnung.

$('body').on('mouseover', '#site-nav a', function(){ 
 
    console.log('yessss'); 
 
});

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

 
<div id="site-nav"> 
 
    <a href="#">Link1</a> 
 
    <a href="#">Link2</a> 
 
    <a href="#">Link3</a> 
 
</div>

Answer 2

können Sie erreichen, was Sie mit der .each() Funktion zu durchqueren, durch alle Elemente eines mit id-Website-nav suchen. Ich glaube, es bringt alle Elemente in ein Array für Sie. .

$ ('# Website-nav a') jede (function ({ \ code geht hier, Sie die aktuellen $ (this) zu verweisen auf ein Element verwenden können .}));

Auch aufpassen, wenn eine ID als Selektor verwendet wird. Ids sind zur einmaligen Verwendung bestimmt und sollen für ein dom-Element spezifisch sein. Ich kenne die Erklärung nicht, aber ich habe versucht, zu erreichen, was Sie tun, IDs zu verwenden, und es funktioniert nicht.

Answer 3

Dieser Code scheint wie geschrieben zu funktionieren: versuchen Sie den folgenden Code auszuführen. Wenn Sie ein wenig mehr Kontext anbieten, können wir vielleicht effektiver helfen. Es ist jedoch erwähnenswert, dass das mouseover-Ereignis ausgelöst wird, wenn die Maus das Element betritt, und nicht ständig feuert, während es über dem Element ist.

var $els = document.querySelectorAll('#site-nav a'); 
 
for(i = 0; i < $els.length; i++) { 
 

 
     $els[i].addEventListener('mouseover', function() { 
 
      console.log('yessss'); 
 
     }); 
 

 
}

<div id="site-nav"><a>Some link</a></div>

Answer 4

Der Code, den Sie Werke haben wie erwartet:

Wenn Sie auf das Bild aussehen werden Sie nur eine Linie, sondern eine Reihe vor ihm sehen, wird diese Zahl erhöhen jedes Mal, schweben Sie über den Link:

var $els = document.querySelectorAll('#site-nav a'); 
for(i = 0; i < $els.length; i++) { 

     $els[i].addEventListener('mouseover', function() { 
      console.log('yessss'); 
     }); 

} 

Fiddle:

https://jsfiddle.net/kkwc3mLn/