jQuery $ („. class”). click (); - wiele elementów, kliknij wydarzenie raz

Mam wiele zajęć na stronie o tej samej nazwie. Mam wtedy zdarzenie .click () w moim JS. Chcę, aby zdarzenie kliknięcia miało miejsce tylko raz, niezależnie od wielu zajęć na mojej stronie.

Scenariusz jest taki, że używam AJAX do dodawania do koszyka. Czasami na stronie głównej może znajdować się polecany produkt i najlepsza oferta, co oznacza, że ​​jest tam ta sama klasa .add. # Productid # i po kliknięciu przycisku dodaj do koszyka AJAX jest uruchamiany dwukrotnie.

Pomyślałem o utworzeniu „obszarów kliknięcia”, aby uzyskać .container-name .add. # Pid #, dając tym samym unikalne kliknięcia.

Czy to jedyne rozwiązanie?

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

Przepraszamy za wbijanie tego starego wątku. Miałem teraz ten sam problem i chciałem podzielić się moim rozwiązaniem.

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

event.StopPropagationi event.StopImmediatePropagation()powinien załatwić sprawę.

Posiadanie selektora .class dla modułu obsługi zdarzeń spowoduje bubblingzdarzenie click (czasami do elementu Parent, czasami do elementów Children w DOM).

event.StopPropagation()zapewnia, że ​​zdarzenie nie będzie bąbelkowe do elementów Parent, podczas gdy event.StopImmediatePropagation()metoda zapewnia, że ​​zdarzenie nie będzie bąbelkami do elementów Children żądanego selektora klasy.

Źródła: https://api.jquery.com/event.stoppropagation/ https://api.jquery.com/event.stopimmediatepropagation/

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

Czy możemy zobaczyć Twój moduł obsługi kliknięć? Dołączasz 5 słuchaczy do 5 różnych elementów. Jednak gdy użytkownik kliknie element, uruchamiane jest tylko jedno zdarzenie.

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

  addToCart(productId);
});

Jeśli to rozwiązanie nie zadziała, chciałbym spojrzeć na Twój moduł obsługi kliknięć.

po kliknięciu elementu div z klasą addproduct wywoływane jest jedno zdarzenie dla tego konkretnego elementu, a nie pięć. robisz coś złego w swoim kodzie, jeśli zdarzenie zostanie uruchomione 5 razy.

W takiej sytuacji spróbuję:

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

    //your code here

 });

następnie, jeśli chcesz wykonać coś w innych elementach z tą samą klasą, kliknij jeden z nich, możesz zapętlić elementy:

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

      //your code here
     }
  );
 }
);

Myślę, że zdarzenie kliknięcia dodajesz pięć razy. Spróbuj policzyć, ile razy to robisz.

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

To powinno to naprawić i powinno być dobrym nawykiem: .unbind ()

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

Rozwiązałem to, używając wbudowanego wywołania funkcji jquery, takiego jak

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

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

Po prostu miałem ten sam problem. W moim przypadku kod PHP generował kilka razy ten sam kod jQuery i był to wielokrotny wyzwalacz.

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

(PHP MULTIPLE GENERATER NUMBERS generowało również ten sam kod wiele razy)

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

Moim rozwiązaniem było oddzielenie skryptu w innym pliku php i załadowanie tego pliku JEDEN RAZ.

Po prostu wprowadź kod tutaj W JQuery, jedno zdarzenie jest wyzwalane, wystarczy sprawdzić liczbę wystąpień klas w pliku i użyć pętli for dla następnej logiki. do identyfikacji liczby wystąpień dowolnej klasy, tagu lub dowolnego elementu DOM poprzez JQuery: var len = $ (". addproduct"). length;

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

Miałem ten sam problem. Powodem było to, że kilka razy miałem to samo jquery. Został umieszczony w pętli.

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

Z tego powodu strzelał wielokrotnie

Sam spróbowałem tego w swoim projekcie.

Wszystkie moje wiersze w tabeli mają klasę „kontakt”:

Mój kod wygląda tak:

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

Po raz pierwszy przestraszyłem się zobaczyć całe moje wiersze w konsoli Firebug, kiedy wykonałem kod:

Ale potem zdałem sobie sprawę, że zdarzenie kliknięcia nie zostało uruchomione, ponieważ nie pojawiło się okno dialogowe z ostrzeżeniem. Firebug pokazuje tylko te elementy, na które ma wpływ kliknięcie. Więc nie ma się czym martwić.

Spróbuj skorzystać z programu .off()obsługi:

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

Dołączam moduł obsługi zdarzenia kliknięcia na przycisku modalnym OK, aby działać na clickzdarzenie obiektu z klasą.archive-link .

Po pierwszym kliknięciu zdarzenie jest wywoływane tylko na tym .archive-linkobiekcie, na którym funkcja ma działać ( var linkObj). Ale kiedy kliknę to samo łącze po raz drugi i kliknę OK w oknie modalnym, zdarzenie zostanie uruchomione dla każdego obiektu, w .archive-linkktórym kliknąłem wcześniej.

Skorzystałem z powyższych rozwiązań ale niestety nie zadziałało. To było, gdy wywołałem .off () w funkcji modalnego kliknięcia przycisku OK, że propagacja zatrzymała się. Mam nadzieję, że to pomoże.

To pytanie zostało rozwiązane i również otrzymałem wiele odpowiedzi, ale chcę coś do niego dodać. Próbowałem dowiedzieć się, dlaczego mój element klikający odpala 77 razy, a nie raz.

w moim kodzie miałem each, uruchamiając odpowiedź JSON i wyświetlając ją jako elementy DIV z przyciskami. A potem zadeklarowałem zdarzenie kliknięcia wewnątrz każdego.

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

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

Jeśli napiszesz swój kod w ten sposób, przycisk class .test-button otrzyma wiele zdarzeń kliknięcia. Na przykład moje dane mają 77 wierszy, więc każda będzie działać 77 razy, co oznacza, że ​​odrzucę zdarzenie kliknięcia w klasie 77 razy. Po kliknięciu element zostanie odpalony 77 razy.

Ale jeśli napiszesz to w ten sposób:

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

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

deklarujesz element click po każdym. Oznacza to, że każdy uruchomi się 77 razy, a element kliknięcia zostanie zadeklarowany tylko raz. Jeśli więc klikniesz element, zostanie on uruchomiony tylko raz.

Po prostu wykonaj poniższy kod, który działa absolutnie dobrze

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


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

}

Witam przepraszam za bump ten post, po prostu napotykam ten problem i chciałbym pokazać moją sprawę.

Mój kod wygląda tak.

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

Kod JavaScript

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

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

Twoje zdarzenie jest wywoływane tylko raz ... więc ten kod może działać, spróbuj tego

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