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

Applico:

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

Su questo:

             

Come mai quando clicco sui primi 2 pulsanti, aggiunge 111, il pulsante successivo aggiunge 11 e l’ultimo aggiunge 1?

Imansible replicare. Sospetto che tu stia travisando, semplificando per lo più, la tua situazione. Per essere precisi, credo che tu stia aggiungendo dynamicmente quegli input e chiamando $(".newContentLink").click(...) ogni volta – che, naturalmente, continua ad applicare copie aggiuntive del gestore di clic per ogni .newContentLink in la pagina.

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

Per impedire ciò, applicare il gestore di clic all’elemento DOM appena creato, non $(".newContentLink") (che significa sempre ogni .newContentLink ).

oppure puoi annullare l’evento click ogni volta che aggiungi un nuovo elemento

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

Come dice il caos , probabilmente stai chiamando click() ogni volta che ne aggiungi uno e si stanno accumulando.

Se stai aggiungendo questi elementi al documento in modo dinamico e hai bisogno di assicurarti che questa funzione sia aggiunta a tutti quelli che aggiungi, che ne dici di usare live?

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

Ciò assicurerà che la regola venga applicata dynamicmente una volta a qualsiasi class qualificante nel documento.

Non un bug jQuery – Demo di lavoro

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

MODIFICARE:

Basta leggere la risposta del caos , che suona come una spiegazione plausibile.

A proposito, gli ID degli elementi devono essere univoci all’interno del codice HTML: questo fa parte delle specifiche HTML e potrebbe essere un’altra ansible spiegazione

Per assicurarti che la funzione venga eseguita solo una volta su un evento di un clic, puoi usare $ (“. NewContentLink”). One ();

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

Prova a dare nomi diversi ai tuoi elementi di input di invio.

Ho avuto un problema simile …. Ho capito che stavo applicando la funzione di modifica in un ciclo … cioè il mio codice precedente era ….

 $("table#UserIRTable > tbody > tr").each(function() { .............. .............. $("input[id='thisMonthSupply']").change(function(e){ ...... }); .......... .......... } 

ha preso la funzione di modifica e bingo … ha funzionato …..