2009-12-29 21 views
5

Estoy creando un pequeño mecanismo de votación que envía una marca de tiempo de base de datos rápida a través de AJAX.JQuery Class Selector sigue activa después de removeClass

Una serie de botones con la clase "votar" son los desencadenantes para votar, mientras que hay texto a continuación para mostrar cuántos "votos" corresponden a ese elemento en particular.

Después de ejecutar el método AJAX desde el evento click, elimino la clase "vote" de modo que no puede haber más de uno de ese elemento. Sin embargo, mi problema es que, incluso con la clase eliminada, el activador aún puede disparar e incrementar la cantidad de votos.

Aquí está el código HTML del elemento:

 <div class="points"> 
     <img class="vote" src="images/up.gif" alt="'.$idea['id'].'"> 
     <p class="vote-'.$idea['id'].'">'.$points.' Points</p> 
    </div> 

Aquí está la llamada jQuery:

$('.vote').click(function(){ 
     var iID = $(this).attr('alt'); 
     var typeString = "id="+iID; 
     $.ajax({ 
      type: "POST", 
      url:"vote.php", 
      data: typeString, 
      success: function (txt){ 
       $('.vote-'+iID).html('<p>'+txt+' Points</p>'); 
      } 
     }); 
     $(this).attr('src', 'images/voted.gif'); 
     $(this).removeClass('vote'); 
    }); 
+1

'$ (this) .removeClass ('vote'). Unbind ('click');' – czarchaic

+2

Según la respuesta del remitente: Puede usar jQuery's '$ (". Vote "). Live (" click " , function() {}); 'en lugar del clic, de esta forma no tiene que preocuparse por el enlace y la desvinculación si está creando dinámicamente elementos. –

Respuesta

5

El class de un elemento DOM se utiliza para hacer referencia a él, no para alterar su comportamiento de vinculación de eventos.

Para eliminar un elemento de DOM haga clic en evento use unbind.

9

Usted está adjuntando el controlador de eventos para el elemento DOM, y se mantiene intacta. Puede

a. establecer .data('triggered', 1) como lo siguiente:

if (!$(this).data('triggered')) { 
    // do code 
    $(this).data('triggered', 1); 
} 

b.

if ($(this).hasClass('vote')) { 
    // do code 
} 

c. utilice .live en lugar de .click, p. ej. $('.foo').live('click', fn)

d. elimine el controlador de eventos manualmente después de invocar su código, $(this).unbind('click') como la última línea, después de eliminar el bit de clase

1

El selector solo se evalúa una vez, cuando se lo llama por primera vez. No se vuelve a evaluar cada vez que se dispara un evento para verificar qué elementos coinciden; eso sería lento