jQuery $ (". class"). click (); - несколько элементов, нажмите событие один раз

Question

У меня есть несколько классов на странице с тем же именем. Затем у меня есть событие .click () в моем JS. Я хочу, чтобы событие click происходило только один раз, независимо от нескольких классов на моей странице.

Сценарий таков, что я использую AJAX для добавления в корзину. Иногда на главной странице может присутствовать рекомендуемый продукт и топовое предложение, что означает, что там находится тот же класс .add. # Productid #, и при нажатии на кнопку добавления в корзину AJAX запускается дважды.

Я думал о создании «областей кликов», чтобы у меня было .container-name .add. # Pid #, поэтому я получал уникальные клики.

Это единственное решение?

<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

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

Answer 2

Извините за то, что натолкнулся на эту старую ветку. У меня была та же проблема прямо сейчас, и я хотел поделиться своим решением.

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

event.StopPropagation и event.StopImmediatePropagation() должны добиться цели.

Наличие селектора .class для обработчика событий приведет к bubbling событию click (иногда к родительскому элементу, иногда к дочерним элементам в DOM).

Метод

event.StopPropagation() гарантирует, что событие не передается элементам Parent, а метод event.StopImmediatePropagation() гарантирует, что событие не передается элементам Children нужного селектора класса.

Источники: https://api.jquery.com/event.stoppropagation/ https://api.jquery.com/event.stopimmediatepropagation/

Answer 3

Можем ли мы увидеть ваш обработчик кликов?Вы прикрепляете 5 слушателей к 5 различным элементам.Однако, когда пользователь нажимает на элемент, запускается только одно событие.

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

  addToCart(productId);
});

Если это решение не работает, я хотел бы взглянуть на ваш обработчик кликов.

Answer 4

когда вы нажимаете div с классом addproduct, для этого конкретного элемента запускается одно событие, а не пять. вы делаете что-то не так в своем коде, если событие запускается 5 раз.

Answer 5

Я думаю, вы добавляете событие клика пять раз. Попробуйте посчитать, сколько раз вы делаете это.

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

Answer 6

В этой ситуации я бы попробовал:

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

    //your code here

 });

тогда, если вам нужно выполнить что-то в других элементах с тем же классом, щелкнув по одному из них, вы можете пройтись по элементам:

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

      //your code here
     }
  );
 }
);

Answer 7

Это должно исправить это и должно быть хорошей привычкой: .unbind ()

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

Answer 8

Я решил это с помощью встроенного вызова функции jquery, как

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

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

Answer 9

У меня просто была такая же проблема. В моем случае PHP-код несколько раз генерировал один и тот же код jQuery, и это был многократный триггер.

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

(НЕСКОЛЬКО НОМЕРОВ ГЕНЕРАТОРА PHP генерирует также один и тот же код несколько раз)

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

Мое решение состояло в том, чтобы отделить скрипт в другом php-файле и загрузить его ОДИН РАЗ.

Answer 10

Просто введите код здесь в JQuery, Событие none запускается, вы просто проверяете количество вхождений классов в файле и используете цикл for для следующей логики. для определения количества вхождений любого класса, тега или любого элемента DOM через JQuery: var len = $ (". addproduct"). length;

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