recargar - jQuery $(". clase"). haga clic en();-elementos múltiples, haga clic en evento una vez

provocar un evento click jquery

Question

Tengo varias clases en una página del mismo nombre. Luego tengo un evento .click () en mi JS. Lo que quiero que suceda es que el evento click solo ocurre una vez, independientemente de las múltiples clases en mi página.

El escenario es que estoy usando AJAX para agregar al carrito. A veces en la página de inicio puede haber un producto destacado y una oferta superior, lo que significa que la misma clase .add. # Productid # está allí y cuando se hace clic en agregar al carrito, AJAX se dispara dos veces.

Pensé en hacer ''áreas de clic'' para tener .container-name .add. # Pid # por lo tanto, dando clics únicos.

¿Es esta la única solución?

<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>


$(".addproduct").click(function(){//do something fired 5 times});

Answer 1

¿Podríamos ver su controlador de clics? Estás uniendo 5 oyentes a 5 elementos diferentes. Sin embargo, cuando el usuario hace clic en el elemento, solo se dispara un evento.

$(".addproduct").click(function(){
  // Holds the product ID of the clicked element
  var productId = $(this).attr(''class'').replace(''addproduct '', '''');

  addToCart(productId);
});

Si esta solución no funciona, me gustaría ver su manejador de clics.

Answer 2

Acabo de tener el mismo problema. En mi caso, el código PHP generó pocas veces el mismo código jQuery y ese fue el disparador múltiple.

<a href="#popraw" class="report" rel="884(PHP MULTIPLE GENERATER NUMBERS)">Popraw / Zgłoś</a>

(PHP MULTIPLE GENERATER NUMBERS generó también el mismo código varias veces)

<script type="text/javascript">
$(''.report'').click(function(){...});
</script>

Mi solución fue separar el script en otro archivo php y cargar ese archivo UNA VEZ.

Answer 3

Creo que agregas click evento cinco veces. Intenta contar cuántas veces haces esto.

console.log(''add click event'')
$(".addproduct").click(function(){ });

Answer 4

Disculpas por chocar con este viejo hilo. Tenía el mismo problema ahora, y quería compartir mi solución.

$(".yourButtonClass").on(''click'', function(event){
    event.stopPropagation();
    event.stopImmediatePropagation();
    //(... rest of your JS code)
});

event.StopPropagation y event.StopImmediatePropagation() deberían hacer el truco.

Tener un selector .class para el controlador de eventos dará como resultado el bubbling del evento click (a veces al elemento Parent, a veces a los elementos Children en DOM).

event.StopPropagation() método event.StopPropagation() asegura que el evento no se event.StopImmediatePropagation() elementos principales, mientras que el método event.StopImmediatePropagation() garantiza que el evento no se event.StopImmediatePropagation() elementos event.StopImmediatePropagation() del selector de clase deseado.

Fuentes: https://api.jquery.com/event.stoppropagation/ https://api.jquery.com/event.stopimmediatepropagation/

Answer 5

En esta situación, intentaría:

$(document).on(''click'',''.addproduct'', function(){

    //your code here

 });

luego, si necesitas realizar algo en los otros elementos con la misma clase al hacer clic en alguno de ellos, puedes recorrer los elementos:

$(document).on(''click'',''.addproduct'', function(){
   $(''.addproduct'').each( function(){

      //your code here
     }
  );
 }
);

Answer 6

Esto debería arreglarlo y debería ser un buen hábito: .unbind ()

$(".addproduct").unbind().click(function(){
   //do something 
});

Answer 7

Intente hacer uso del controlador .off() :

$(function () {
    $(".archive-link").click(function (e) {
        var linkObj = $(this);
        var cb = $("#confirm-modal");
        cb.find(".modal-body").append("<p>Warning message.</p>");
        cb.modal(''show''); 
        cb.find(".confirm-yes").click(function () {
            $(this).off(); //detach this event
            //ajax call yada yada..
        }

Adjunto un controlador de evento click en un botón modal OK para actuar en el evento click del objeto con la clase .archive-link .

En el primer clic, el evento se dispara solo en ese objeto .archive-link que solicité a la función para que actúe ( var linkObj ). Pero cuando hago clic en el mismo enlace la segunda vez y pulso Aceptar en el modal, el evento se .archive-link en cada objeto que tiene .archive-link que hice clic anteriormente.

Usé las soluciones anteriores, pero desafortunadamente no funcionó. Fue cuando llamé a .off () dentro de la función modal de clic del botón Aceptar que la propagación se detuvo. Espero que esto ayude.

Answer 8

Lo intenté yo mismo en mi proyecto.

Todas mis filas en una tabla tienen un "contacto" de clase:

Mi código se ve así:

var contactManager = {};

contactManager.showEditTools = function(row) {
  console.debug(row);
}

$(''.contact'').click(function(event){
  console.log("this should appear just once!");
  alert("I hope this will appear just once!");
  contactManager.showEditTools(event);
});

Y primero tuve miedo de ver todas mis filas como resultado en la consola Firebug cuando ejecuté el código:

Pero luego me di cuenta de que el evento de clic no se había activado, porque no aparecía ningún diálogo de alerta. Firebug le muestra solo los elementos que se ven afectados por el click overiding. Entonces no hay nada de qué preocuparse.

Answer 9

Lo resolví mediante el uso de la función jquery llamada en línea como

<input type="text" name="testfield" onClick="return testFunction(this)" /> 

<script>
  function testFunction(current){
     // your code go here
  }
</script>

Answer 10

Simplemente ingrese el código aquí. En JQuery, el evento se activa, solo verifica el número de ocurrencias de clases en el archivo y lo utiliza para la siguiente lógica. para identificar el número de ocurrencias de cualquier clase, etiqueta o cualquier elemento DOM a través de JQuery: var len = $ (". addproduct"). length;

 $(".addproduct").click(function(){
       var len = $(".addproduct").length; 
       for(var i=0;i<len;i++){
          ...
        }
 });

Answer 11

Yo tuve el mismo problema. La causa fue que tuve el mismo jquery varias veces. Fue colocado en un bucle.

$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});

Por esta razón estaba disparando varias veces

Answer 12

cuando haces clic en div con la clase addproduct, se desencadena un evento para ese elemento en particular, no cinco. estás haciendo algo mal en tu código si el evento se dispara 5 veces.

Answer 13

su evento se desencadena solo una vez ... por lo que este código puede funcionar intente esto

    $(".addproduct,.addproduct,.addproduct,.addproduct,.addproduct").click(function(){//do     something fired 5 times});

Answer 14

$(document).on(''click'', ''.addproduct'', function () {
    // your function here
});