jQuery $ (". class"). click (); - Mehrere Elemente, klicken Sie einmal auf Ereignis

Ich habe mehrere Klassen auf einer Seite mit demselben Namen. Ich habe dann ein .click () -Ereignis in meinem JS. Was ich möchte, ist, dass das Klickereignis nur einmal auftritt, unabhängig von mehreren Klassen auf meiner Seite.

Das Szenario ist, dass ich AJAX zum Hinzufügen zum Warenkorb verwende. Manchmal gibt es auf der Startseite ein Produkt und ein Top-Angebot, was bedeutet, dass dieselbe Klasse .add. # Productid # vorhanden ist und beim Klicken auf den Warenkorb AJAX zweimal ausgelöst wird.

Ich habe darüber nachgedacht, "Klickbereiche" zu erstellen, damit ich .container-name .add. # Pid # habe und daher eindeutige Klicks gebe.

Ist das die einzige Lösung?

<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});

Entschuldigung für das Anstoßen dieses alten Threads. Ich hatte jetzt das gleiche Problem und wollte meine Lösung teilen.

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

event.StopPropagation und event.StopImmediatePropagation() sollte den Trick machen.

Ein .class-Selektor für den Event-Handler führt dazu bubbling (manchmal zu übergeordneten Elementen, manchmal zu untergeordneten Elementen in DOM).

event.StopPropagation()Die Methode stellt sicher, dass das Ereignis nicht zu übergeordneten Elementen sprudelt, während die event.StopImmediatePropagation()Methode sicherstellt, dass das Ereignis nicht zu untergeordneten Elementen des gewünschten Klassenselektors sprudelt.

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

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

Könnten wir Ihren Klick-Handler sehen? Sie fügen 5 verschiedenen Elementen 5 Listener hinzu. Wenn der Benutzer jedoch auf das Element klickt, wird nur ein Ereignis ausgelöst.

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

  addToCart(productId);
});

Wenn diese Lösung nicht funktioniert, möchte ich mir Ihren Klick-Handler ansehen.

Wenn Sie mit addproduct class auf div klicken, wird ein Ereignis für dieses bestimmte Element ausgelöst, nicht für fünf. Sie machen etwas falsch in Ihrem Code, wenn das Ereignis fünfmal ausgelöst wird.

In dieser Situation würde ich versuchen:

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

    //your code here

 });

Wenn Sie dann etwas in den anderen Elementen mit derselben Klasse ausführen müssen, indem Sie auf eines davon klicken, können Sie die Elemente durchlaufen:

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

      //your code here
     }
  );
 }
);

Ich denke, Sie fügen fünf Mal ein Klickereignis hinzu. Versuchen Sie zu zählen, wie oft Sie dies tun.

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

Dies sollte das Problem beheben und eine gute Angewohnheit sein: .unbind ()

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

Ich habe es mit Inline-JQuery-Funktionsaufrufen wie gelöst

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

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

Ich hatte gerade das gleiche Problem. In meinem Fall hat PHP-Code einige Male denselben jQuery-Code generiert, und das war der Mehrfachauslöser.

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

(PHP MULTIPLE GENERATER NUMBERS haben auch denselben Code mehrmals generiert)

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

Meine Lösung bestand darin, das Skript in einer anderen PHP-Datei zu trennen und diese Datei EINMAL zu laden.

Geben Sie einfach hier Code ein. In JQuery wird ein Ereignis ausgelöst. Sie überprüfen lediglich die Anzahl der Vorkommen von Klassen in der Datei und verwenden die for-Schleife für die nächste Logik. um die Anzahl der Vorkommen einer Klasse, eines Tags oder eines DOM-Elements über JQuery zu ermitteln: var len = $ (". addproduct"). length;

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

Ich hatte das gleiche Problem. Die Ursache war, dass ich mehrmals dieselbe Frage hatte. Er wurde in eine Schleife gelegt.

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

Aus diesem Grund wurde mehrfach geschossen

Ich habe es selbst in meinem Projekt versucht.

Alle meine Zeilen in einer Tabelle haben eine Klasse "Kontakt":

Mein Code sieht folgendermaßen aus:

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);
});

Und ich hatte zuerst Angst, meine ganzen Zeilen als Ergebnis in der Firebug-Konsole zu sehen, als ich den Code ausführte:

Aber dann wurde mir klar, dass das Klickereignis nicht ausgelöst wurde, weil kein Warndialog angezeigt wurde. Firebug zeigt Ihnen nur die Elemente, die von der Klicküberschreibung betroffen sind. Es gibt also keinen Grund zur Sorge.

Versuchen Sie, den .off()Handler zu verwenden:

$(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..
        }

Ich füge einen Klickereignishandler an eine OK-Modalschaltfläche an, um auf das clickEreignis des Objekts mit Klasse zu reagieren .archive-link.

Beim ersten Klick wird das Ereignis nur auf das .archive-linkObjekt ausgelöst, auf das ich die Funktion angewendet habe ( var linkObj). Wenn ich jedoch das zweite Mal auf denselben Link klicke und auf dem Modal auf OK klicke, wird das Ereignis für jedes Objekt ausgelöst.archive-link das ich zuvor geklickt habe.

Ich habe die oben genannten Lösungen verwendet, aber leider nicht funktioniert. Als ich .off () innerhalb der modalen OK-Schaltfläche-Klickfunktion aufrief, wurde die Weitergabe gestoppt. Ich hoffe das hilft.

Diese Frage wurde gelöst und hat auch viele Antworten erhalten, aber ich möchte etwas hinzufügen. Ich habe versucht herauszufinden, warum mein Klickelement 77 Mal und nicht einmal geschossen hat.

In meinem Code hatte ich jeweils eine JSON-Antwort, die als Divs mit Schaltflächen angezeigt wurde. Und dann habe ich das Klickereignis in jedem deklariert.

$(data).each(function(){
    button = $('<button>');
    button.addClass('test-button');
    button.appendTo("body");

    $('.test-button').click(function(){
        console.log('i was clicked');
    })
})

Wenn Sie Ihren Code so schreiben, erhält die Klasse .test-button mehrere Klickereignisse. Zum Beispiel haben meine Daten 77 Zeilen, so dass jede 77 Mal ausgeführt wird, was bedeutet, dass ich das Klickereignis für die Klasse 77 Mal ablehne. Wenn Sie auf das Element klicken, wird es 77 Mal ausgelöst.

Aber wenn Sie es so verdrahten:

$(data).each(function(){
    button = $('<button>');
    button.addClass('test-button');
    button.appendTo("body");
})

    $('.test-button').click(function(){
        console.log('i was clicked');
    })

Sie deklarieren das Klickelement nach jedem. Das heißt, jeder wird 77 Mal ausgeführt und das Klickelement wird nur einmal deklariert. Wenn Sie also auf das Element klicken, wird es nur einmal ausgelöst.

Tun Sie einfach unter Code, es funktioniert absolut gut

$(".addproduct").on('click', function(event){
    event.stopPropagation();
    event.stopImmediatePropagation();
    getRecord();
});


function getRecord(){
   $(".addproduct").each(function () {
       console.log("test");
       });

}

Hallo, entschuldige, dass du diesen Beitrag gestoßen hast. Stelle dich einfach diesem Problem und ich möchte meinen Fall zeigen.

Mein Code sieht so aus.

<button onClick="product.delete('1')" class="btn btn-danger">Delete</button>
<button onClick="product.delete('2')" class="btn btn-danger">Delete</button>
<button onClick="product.delete('3')" class="btn btn-danger">Delete</button>
<button onClick="product.delete('4')" class="btn btn-danger">Delete</button>

Javascript-Code

<script>
 var product = {
     //  Define your function
     'add':(product_id)=>{
          //  Do some thing here
     },

     'delete':(product_id)=>{
         //  Do some thig here
     }
 }
</script>

Ihr Ereignis wird nur einmal ausgelöst. Dieser Code funktioniert möglicherweise. Versuchen Sie dies

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