JQuery Func in JS Func ausgeführt zunehmend

Question

Warum feuert eine jQuery-Funktion innerhalb einer Javascript-Funktion zunehmend für jedes Mal, wenn es geklickt hat? So oft geklickt, dass es mehr als 100 Mal pro Klick ausgeführt wird.

<div class="clickity" onclick="funky()">Test</div> 

var x = 0; 

function funky(){ 
    $('.clickity').on('click', function(){ 
     x += 1; 
     alert(x); 
    }); 
}; 

JsFiddle Ich bin nur neugierig, warum es so funktioniert.

Answer 1

Weil jedes Mal, wenn Sie auf clickity klicken, wird funky Methode aufgerufen und registriert einen neuen Ereignis-Listener auf clickity. Sie Mischen von zwei Methoden, entweder tun:

var x = 0; 
 

 
function funky(){ 
 
    x += 1; 
 
alert(x); 
 
};

<div class="clickity" onclick="funky()">Test</div>

oder

var x = 0; 
 

 
$('.clickity').on('click', function(){ 
 
    x += 1; 
 
alert(x); 
 
});

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

Answer 2

Ich verstehe nicht, warum die Zuhörer in die Funktion einfügen ? Jedes Mal, wenn Sie auf klicken, fügen Sie der Schaltfläche einen neuen Listener hinzu. Jeder Klick führt das Inkrement aus und fügt einen neuen Listener hinzu.

Answer 3

Die addEventListener a.k.a. on in jQuery hat einen kumulativen Aspekt. Sie ordnen es nicht zu, indem Sie das alte ersetzen, sondern ein neues hinzufügen und die Kette der vorherigen Handler beibehalten.

Answer 4

Sie kombinieren Klasse JavaScript Onclick HTML-Attribut mit jquery.

Erste Runde

1. Benutzer klickt clickity
2. ein. funky wird wegen des HTML-Attributs onclick
3. aufgerufen funky befestigt einen Listener zu clickety.
4. Hinweis funky hat x bei diesem ersten Klick nicht erhöht.

Nächste Runde

1. Benutzer klickt clickity
2. ein. funky heißt wegen HTML-Attribut onclick
3. b. x um 1 erhöht wird, da der jquery Ereignis Hörer in der ersten Runde
4. flippig an Clickety ein Zuhörer

Zukunft rundet

1. Benutzer klickt
clickity
2. A bis Clickety anbringt. funky heißt wegen HTML-Attribut onclick
3. b. x wird um 1 erhöht, weil jquery-Ereignis-Listener in der ersten Runde angeklickt wird
4. c.x um 1 erhöht wird, weil die jquery Event-Listener in der zweiten Runde an Clickety
5. flippigen legt ein Zuhörer