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

Ответ 1

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

Ответ 2

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

Ответ 3

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

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

  addToCart(productId);
});

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

Ответ 4

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

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

event.StopPropagation и event.StopImmediatePropagation() должны сделать трюк.

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

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

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

    //your code here

 });

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

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

      //your code here
     }
  );
 }
);

Ответ 8

У меня была такая же проблема. В моем случае 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>

Моим решением было разделить script в другом php файле и загрузить этот файл ONE TIME.

Ответ 9

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

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

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

Ответ 10

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

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

Ответ 11

Я пробовал это сам в своем проекте.

Все мои строки в таблице имеют класс "контакт":

Мой код выглядит следующим образом:

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

И я был сначала напуган, чтобы увидеть все мои строки в результате в консоли Firebug, когда я выполнил код:

Но потом я понял, что событие click не было запущено, потому что не появилось диалоговое окно с предупреждением. Firebug показывает вам только те элементы, на которые влияет переключение кликов. Поэтому беспокоиться не о чем.

Ответ 12

Попробуйте использовать обработчик .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..
        }

Я присоединяю обработчик события клика на кнопке OK, чтобы действовать на событие click объекта с классом .archive-link.

При первом щелчке событие срабатывает только для этого объекта .archive-link, на который я попросил функцию действовать (var linkObj). Но когда я нажимаю одну и ту же ссылку во второй раз и нажимаю OK на модальном, событие запускается на каждом объекте с .archive-link, который я нажал раньше.

Я использовал вышеупомянутые решения, но, к сожалению, не работал. Это было, когда я вызвал .off() в рамках модальной кнопки OK, чтобы прекратить распространение. Надеюсь, это поможет.

Ответ 13

У меня была та же проблема. Дело в том, что у меня был один и тот же jquery несколько раз. Он был помещен в цикл.

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

По этой причине стреляли несколько раз

Ответ 14

Этот вопрос был решен, а также получил много ответов, но я хочу что-то добавить к нему. Я пытался выяснить, почему мой элемент щелчка его стрелял 77 раз, и не один раз.

в моем коде у меня был каждый, запуская ответ json и отображая его как divs с кнопками. И затем я объявил событие click внутри каждого.

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

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

Если вы напишете свой код таким образом, кнопка.test класса получит несколько кликов. Например, мои данные имеют 77 строк, поэтому каждый из них будет выполняться 77 раз, это означает, что я отклоню событие click в классе 77 раз. Когда вы нажмете элемент, он будет запущен 77 раз.

Но если вы это сделаете так:

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

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

вы объявляете элемент click после каждого. Это означает, что каждый из них будет работать 77 раз, а элемент click будет объявлен только один раз. Таким образом, если вы нажмете элемент, он будет запущен только один раз.

Ответ 15

Как я могу преобразовать этот код в синтаксис ООП

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

Ответ 16

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

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