Ответ 1
когда вы нажимаете div с классом addproduct, одно событие запускается для этого конкретного элемента, а не из пяти. вы делаете что-то неправильно в своем коде, если событие 5 раз.
У меня есть несколько классов на одной странице. Затем у меня есть событие .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});
когда вы нажимаете div с классом addproduct, одно событие запускается для этого конкретного элемента, а не из пяти. вы делаете что-то неправильно в своем коде, если событие 5 раз.
$(document).on('click', '.addproduct', function () {
// your function here
});
Можем ли мы увидеть ваш обработчик кликов? Вы подключаете 5 слушателей к 5 различным элементам. Однако, когда пользователь нажимает на элемент, запускается только одно событие.
$(".addproduct").click(function(){
// Holds the product ID of the clicked element
var productId = $(this).attr('class').replace('addproduct ', '');
addToCart(productId);
});
Если это решение не работает, я хотел бы посмотреть на ваш обработчик кликов.
Извинения за удар этой старой нити. У меня была такая же проблема прямо сейчас, и я хотел поделиться своим решением.
$(".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/
Я думаю, что вы добавляете событие click пять раз. Постарайтесь подсчитать, сколько раз вы это делаете.
console.log('add click event')
$(".addproduct").click(function(){ });
Это должно исправить это и должно быть хорошей привычкой:.unbind()
$(".addproduct").unbind().click(function(){
//do something
});
В этой ситуации я бы постарался:
$(document).on('click','.addproduct', function(){
//your code here
});
тогда, если вам нужно что-то выполнить в других элементах с одним и тем же классом при щелчке по одному из них, вы можете прокручивать элементы:
$(document).on('click','.addproduct', function(){
$('.addproduct').each( function(){
//your code here
}
);
}
);
У меня была такая же проблема. В моем случае 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.
Я решил это с помощью встроенного вызова функции jquery как
<input type="text" name="testfield" onClick="return testFunction(this)" />
<script>
function testFunction(current){
// your code go here
}
</script>
Просто введите код здесьIn JQuery, одно событие запускается, вы просто проверяете количество вхождений классов в файл и используете для цикла для следующей логики. для определения количества вхождений любого класса, тега или любого элемента DOM через JQuery: var len = $( ". addproduct" ). length;
$(".addproduct").click(function(){
var len = $(".addproduct").length;
for(var i=0;i<len;i++){
...
}
});
Я пробовал это сам в своем проекте.
Все мои строки в таблице имеют класс "контакт":
Мой код выглядит следующим образом:
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 показывает вам только те элементы, на которые влияет переключение кликов. Поэтому беспокоиться не о чем.
Попробуйте использовать обработчик .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, чтобы прекратить распространение. Надеюсь, это поможет.
У меня была та же проблема. Дело в том, что у меня был один и тот же jquery несколько раз. Он был помещен в цикл.
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
По этой причине стреляли несколько раз
Этот вопрос был решен, а также получил много ответов, но я хочу что-то добавить к нему. Я пытался выяснить, почему мой элемент щелчка его стрелял 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 будет объявлен только один раз. Таким образом, если вы нажмете элемент, он будет запущен только один раз.
Как я могу преобразовать этот код в синтаксис ООП
$(document).on('click','.addproduct', function(){
//your code here
});
ваше событие запускается только один раз... поэтому этот код может работать попробуйте это
$(".addproduct,.addproduct,.addproduct,.addproduct,.addproduct").click(function(){//do something fired 5 times});