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

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

в моем коде у меня был каждый, выполняющий ответ json и отображающий его как div с кнопками. А потом я объявил событие click внутри каждого.

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

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

Если вы напишите свой код таким образом, класс .test-button будет получать события нескольких кликов. Например, мои данные содержат 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 будет объявлен только один раз. Поэтому, если вы щелкнете по элементу, он будет запущен только один раз.

Answer 2

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

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

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

Я использовал вышеуказанные решения, но, к сожалению, не сработало. Именно когда я вызвал .off () в модальной функции нажатия кнопки ОК, распространение прекратилось. Надеюсь, это поможет.

Answer 3

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

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

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

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 не было запущено, потому что не появилось диалоговое окно alert.Firebug показывает только те элементы, на которые влияет переориентация кликов.Так что не о чем беспокоиться.

Answer 4

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

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

Answer 5

У меня была такая же проблема.Причина была в том, что у меня было одно и то же jquery несколько раз.Его поместили в петлю.

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

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