¿Por qué mi manejador de clics de jQuery parece ejecutarse varias veces para algunos de sus objetivos?

Question

aplico:

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

En esta:

<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> 

¿Cómo es que al hacer clic en los 2 primeros botones que añade 111, el botón situado junto agrega 11, y el último se añade 1?

Answer 1

incapaz de replicarse. Sospecho que está tergiversando — simplificando, en su mayoría — su situación. Para ser precisos, creo que va a añadir de forma dinámica esas entradas, y llamando $(".newContentLink").click(...) — cada vez que, naturalmente, mantiene la aplicación de copias adicionales del controlador de clic a cada .newContentLink en la página.

Así que la entrada más reciente que ha creado tiene una copia del controlador de clic y añade uno 1. La segunda más reciente tiene dos copias y anexa 11. La tercera tiene tres y añade 111, etc.

Para evitar esto, se aplica el controlador de clic a su elemento DOM de nueva creación, no $(".newContentLink") (lo que significa que siempre cada.newContentLink).

Answer 2

trate de darle diferentes nombres a los elementos de entrada presentar.

Answer 3

no un error jQuery - Working Demo

Debe haber un problema con algo más en su código. ¿Dónde está el elemento con id="test" en su marcado?

EDIT:

acaba de leer chaos' answer, que suena como una explicación plausible.

Por cierto, los identificadores de elemento debe ser único en el formato HTML - esto es parte de la especificación HTML y puede haber otra explicación posible

Answer 4

Como chaos says, es probable que llamar click() cada vez que se agrega una, y se están acumulando

Si va a añadir estos elementos al documento de forma dinámica, y la necesidad de asegurarse de que se añade esta función a cada uno se agrega, cómo sobre el uso directo?

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

Esto se asegurará de que la regla se aplica de forma dinámica una vez a cualquier clase de clasificación en el documento.

Answer 5

tuve un problema similar .... dimos cuenta de que yo estaba aplicando la función de cambio en un bucle ... es decir. mi código anterior era ....

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

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

llevó a cabo la función de cambio y bingo ... funcionó .....

Answer 6

Para asegurarse de que la función sólo ejecutará una vez en un evento de clic que puede usar $ (". newContentLink").uno();

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

Answer 7

o puede desenlazar el evento de clic cada vez que se agrega un nuevo elemento

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

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