multiple - El evento jquery click se dispara varias veces cuando se usa el selector de clase

on click jquery

Question

aqui esta mi html

<li><div class="myLink" id=1>A<div>
<li><div class="myLink" id=2>b<div>
<li><div class="myLink" id=3>c<div>
<li><div class="myLink" id=4>d<div>
<li><div class="myLink" id=5>d<div>
<li><div class="myLink" id=6>e<div>
<li><div class="myLink" id=7>d<div>
<li><div class="myLink" id=8>g<div>

He creado un enlace de evento jquery con este código:

 jQuery(".myLink").click(function(event) {
var myId = this.id;
location.href = ''/x/y?myId='' + myID;
});

cuando hago clic en uno de los enlaces (los elementos li). Pensé que dispararía un evento de un clic y cuando llamo this.id, obtendría esa identificación del elemento en el que hice clic.

Pero en cambio se parece a la

 jQuery(".myLink").click(function(event) {

está disparando una y otra vez, incluso pensé que acabo de hacer clic en un enlace. Puse una declaración del depurador en su y usé Firebug y vi que me llamaban una y otra vez.

¿Alguna idea de qué está pasando?

Answer 1

Añadiendo estas dos líneas lo solucioné para mí:

event.stopPropagation();
event.preventDefault();

Fuente: http://code.google.com/intl/en/mobile/articles/fast_buttons.html

Answer 2

Asegúrese de no incluir el script js varias veces. Si está utilizando un marco en el sitio del servidor, asegúrese de que el diseño y las plantillas no incluyan el mismo script.

Answer 3

Desde el HTML publicado parece que los DIV de myLink están anidados, lo que provoca que el evento se active varias veces, ya que cada DIV recibe el clic. Como se indicó, asegúrese de que las etiquetas estén bien formadas. ¿Se supone que las etiquetas DIV al final de cada línea están cerrando etiquetas?

Answer 4

En mi caso, el javascript debe ser procesado junto con la solicitud ajax.

$(document).ready(function(){
$(document).on(''click'',''.className'',function(){alert(''hello..'')})
});

el evento se activó varias veces ... se usó .off () para eliminar todos los controladores de eventos anteriores. (use la misma firma usada en .on ())

$(document).ready(function(){
$(document).off(''click'',''.className'');
$(document).on(''click'',''.className'',function(){alert(''hello..'')});
});

Espero que ayude a alguien ...

Answer 5

En mi caso, tuve varias pestañas que mostraban el mismo parcial y cada parcial tenía la llamada $ (document) .ready () que vinculaba el evento de clic tres veces.

Answer 6

Intente poner el valor del atributo id entre comillas. Suceden cosas extrañas cuando solo pones id=1 .

Además, ¿cómo sabes que está disparando varias veces? Coloque esta línea en la parte superior de la función y observe el registro de Firebug para ver qué está sucediendo:

console.log( "clicked on", jQuery(this), "which has id", jQuery(this).attr(''id'') );

editar:

Heh, como han señalado otros ... Asegúrese de que su marca también sea válida: P

Answer 7

Mi problema fue que tenía mi enlace de evento en un bucle cuando creé las <div> , agregando el evento una y otra vez para cada elemento del evento. Es sólo algo para volver a comprobar.

Answer 8

Ocurre el mismo problema si ejecuto el mismo código en una página simple que su trabajo correctamente. Cuando hago clic en el botón que tiene la misma clase que usa ese índice de clase, quiero cambiar un div, pero cuando hago clic en el botón en ese momento, la función llama varias veces.

Por ejemplo: si tengo 4 botones y cuatro div y hago clic en el segundo botón ocultar / mostrar segundo div. Pero la ejecución de la función se repite 3 veces [es decir, hasta el índice de clase]

¿Cuál es la razón? He utilizado otros js siguientes también para este propósito se produce este error?

<script type="text/javascript" src="vendors/jquery-validation-engine/js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="vendors/jquery-validation-engine/js/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="vendors/jquery-validation/js/jquery.validate.js"></script>
<script type="text/javascript" src="vendors/datepicker/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="js/pluginjs/jasny-bootstrap.js"></script>
<script type="text/javascript" src="vendors/holderjs/js/holder.js"></script>
<script type="text/javascript" src="vendors/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="vendors/twitter-bootstrap-wizard/js/jquery.bootstrap.wizard.min.js"></script>
<script type="text/javascript" src="js/pages/wizard.js"></script>
<script type="text/javascript" src="vendors/moment/js/moment.min.js"></script>

Answer 9

Si cierra sus etiquetas <li> , solucionará el problema. Acabo de probarlo, y eso lo corrige. Debiera ser

<li> ... </li>
<li> ... </li>

no

<li>
<li>

Answer 10

Tuve un problema similar y la solución para mí fue desvincular el evento de clic antes de declarar el evento de clic. No tiene mucho sentido, pero no tenía idea de cómo los múltiples eventos se adjuntan a un solo elemento HTML. (y mi HTML parecía válido;))

$ (''. remove_lkc''). desvinculación (''clic''). haga clic en (función () {..........