Perché il gestore dei clic di jQuery sembra essere eseguito più volte per alcuni dei suoi target?

Question

Applico:

$(".newContentLink").click(function() { 
    $("#test").append("1"); 
}); 

In questa:

<span id="contents"> 
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/> 
<span id="content1" class="content study"> 
</span> 
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/> 
<span id="content3" class="content study"> 
</span> 
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/> 
<span id="content4" class="content category"> 
</span> 
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/> 
</span> 

Come mai quando clicco sui primi 2 bottoni che aggiunge 111, il pulsante successivo aggiunge 11, e l'ultimo si aggiunge 1?

Answer 1

Impossibile replicare. Sospetto che tu stia rappresentando in modo errato — semplificando eccessivamente, per lo più la tua situazione è la —. Per essere precisi, credo che tu stia aggiungendo dinamicamente quegli input e chiamando $(".newContentLink").click(...) ogni volta — che, naturalmente, continua ad applicare copie aggiuntive del gestore di clic a ciascun .newContentLink nella pagina.

Quindi l'input più recente che hai creato ha una copia del gestore di clic e aggiunge uno 1. Il secondo più recente ha due copie e aggiunge 11. Il terzo ha tre e aggiunge 111, ecc

Per evitare questo, si applica il gestore semplice clic elemento DOM appena creato, non $(".newContentLink") (che significa sempre ogni.newContentLink).

Answer 2

Provare a dare nomi diversi agli elementi di input di invio.

Answer 3

Non un bug jQuery - Working Demo

Ci deve essere un problema con qualcosa d'altro nel codice. Dov'è l'elemento con id="test" nel tuo markup?

EDIT:

Basta leggere chaos' answer, che suona come una spiegazione plausibile.

A proposito, ids elemento deve essere univoco all'interno markup HTML - questo fa parte della specifica HTML e può essere un altro possibile spiegazione

Answer 4

Come chaos says, probabilmente stai chiamando click() ogni volta che si aggiunge uno, e stanno accumulando.

Se si aggiungono questi elementi al documento in modo dinamico e occorre assicurarsi che questa funzione sia stata aggiunta a tutti quelli che si aggiungono, come utilizzare l'applicazione live?

$('#contents').on('click', '.newContentLink', function() { 
    $("#test").append("1"); 
}); 

Questo farà in modo la regola viene applicata in modo dinamico una volta a qualsiasi classe di qualificazione nel documento.

Answer 5

Ho avuto un problema simile .... Ho capito che stavo applicando la funzione di modifica in un ciclo ... i.e. il mio codice in precedenza era ....

$("table#UserIRTable > tbody > tr").each(function() 
{ 
    .............. 
    .............. 

    $("input[id='thisMonthSupply']").change(function(e){ 
     ...... 
    }); 
    .......... 
    .......... 
} 

ha preso la funzione di cambio fuori e bingo ... ha funzionato .....

Answer 6

per assicurarsi che la funzione di eseguire solo una volta su un evento click voi può usare $ (". newContentLink").uno();

$(".newContentLink").one(function() { 
    $("#test").append("1"); 
}); 

Answer 7

o si può associare l'evento click ogni volta che si aggiunge un nuovo elemento

$('.newContentLink').unbind('click'); 

$(".newContentLink").click(function() { 
    $("#test").append("1"); 
});