jQuery $(".class").click(); - 多个元素，点击事件一次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5563783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery $(".class").click(); - multiple elements, click event once
提问by izip
I have multiple classes on a page of the same name. I then have a .click() event in my JS. What I want to happen is the click event only happen once, regardless of multiple classes on my page.
我在同名页面上有多个类。然后我在我的 JS 中有一个 .click() 事件。我想要发生的是点击事件只发生一次，而不管我的页面上有多个类。
The scenario is that I am using AJAX to add to cart. Sometimes on the home page there might be a featured product and a top offer which means that the same class .add .#productid# is there and when clicked the add to cart AJAX is fired twice.
场景是我使用 AJAX 添加到购物车。有时在主页上可能有一个特色产品和一个最高报价，这意味着同一个类 .add .#productid# 在那里，当点击添加到购物车时，AJAX 会被触发两次。
I thought about making 'click areas' so I would have .container-name .add .#pid# therefore giving unique clicks.
我考虑过制作“点击区域”，所以我会有 .container-name .add .#pid# 因此给予独特的点击。
Is this the only solution?
这是唯一的解决方案吗？
<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});
回答by Ivan Kalafati?
Apologies for bumping this old thread. I had the same problem right now, and I wanted to share my solution.
抱歉撞到这个旧线程。我现在遇到了同样的问题，我想分享我的解决方案。
$(".yourButtonClass").on('click', function(event){
event.stopPropagation();
event.stopImmediatePropagation();
//(... rest of your JS code)
});
event.StopPropagationand event.StopImmediatePropagation()should do the trick.
event.StopPropagation并且event.StopImmediatePropagation()应该做到这一点。
Having a .class selector for Event handler will result in bubblingof click event (sometimes to Parent element, sometimes to Children elements in DOM).
具有事件处理程序的 .class 选择器将导致bubbling单击事件（有时是父元素，有时是 DOM 中的子元素）。
event.StopPropagation()method ensures that event doesn't bubble to Parent elements, while event.StopImmediatePropagation()method ensures that event doesn't bubble to Children elements of desired class selector.
event.StopPropagation()方法确保事件不会冒泡到父元素，而event.StopImmediatePropagation()方法确保事件不会冒泡到所需类选择器的子元素。
Sources: https://api.jquery.com/event.stoppropagation/https://api.jquery.com/event.stopimmediatepropagation/
来源：https: //api.jquery.com/event.stoppropagation/ https://api.jquery.com/event.stopimmediatepropagation/
回答by Entara
$(document).on('click', '.addproduct', function () {
// your function here
});
回答by EMMERICH
Could we see your click handler? You're attaching 5 listeners to 5 different elements. However, when the user clicks on the element, only one event is fired.
我们可以看看您的点击处理程序吗？您将 5 个侦听器附加到 5 个不同的元素。但是，当用户单击元素时，只会触发一个事件。
$(".addproduct").click(function(){
// Holds the product ID of the clicked element
var productId = $(this).attr('class').replace('addproduct ', '');
addToCart(productId);
});
If this solution doesn't work I'd like to look at your click handler.
如果此解决方案不起作用，我想查看您的点击处理程序。
回答by Headshota
when you click div with addproduct class one event is fired for that particular element, not five. you're doing something wrong in you code if event is fired 5 times.
当您单击带有 addproduct 类的 div 时，会为该特定元素触发一个事件，而不是五个。如果事件被触发 5 次，那么你在代码中做错了。
回答by Paolo Anghileri
In this situation I would try:
在这种情况下，我会尝试：
$(document).on('click','.addproduct', function(){
//your code here
});
then, if you need to perform something in the other elements with the same class on click on one ot them you can loop through the elements:
然后，如果您需要在具有相同类的其他元素中执行某些操作，请单击它们中的一个，您可以循环访问这些元素：
$(document).on('click','.addproduct', function(){
$('.addproduct').each( function(){
//your code here
}
);
}
);
回答by Max7K
I think you add click event five times. Try to count how many times you do this.
我认为您添加了五次点击事件。试着数一下你这样做了多少次。
console.log('add click event')
$(".addproduct").click(function(){ });
回答by SteveGSD
This should fix it and should be a good habit: .unbind()
这应该可以解决它并且应该是一个好习惯：.unbind()
$(".addproduct").unbind().click(function(){
//do something
});
回答by Ravi
I solved it by using inline jquery function call like
我通过使用内联 jquery 函数调用来解决它
<input type="text" name="testfield" onClick="return testFunction(this)" />
<script>
function testFunction(current){
// your code go here
}
</script>
回答by Lesenus
I just had the same problem. In my case PHP code generated few times the same jQuery code and that was the multiple trigger.
我只是遇到了同样的问题。在我的例子中，PHP 代码生成了几次相同的 jQuery 代码，这就是多重触发器。
<a href="#popraw" class="report" rel="884(PHP MULTIPLE GENERATER NUMBERS)">Popraw / Zg?o?</a>
(PHP MULTIPLE GENERATER NUMBERS generated also the same code multiple times)
（PHP MULTIPLE GENERATER NUMBERS 也多次生成相同的代码）
<script type="text/javascript">
$('.report').click(function(){...});
</script>
My solution was to separate script in another php file and load that file ONE TIME.
我的解决方案是在另一个 php 文件中分离脚本并加载该文件一次。
回答by virendra gawale
Simply enter code hereIn JQuery, ones event is triggered you just check number of occurrences of classes in file and use for loop for next logic. for identify number of occurrences of any class, tag or any DOM element through JQuery : var len = $(".addproduct").length;
只需在此处输入代码在 JQuery 中，触发一个事件，您只需检查文件中类的出现次数并使用 for 循环进行下一个逻辑。用于通过 JQuery 识别任何类、标签或任何 DOM 元素的出现次数： var len = $(".addproduct").length;
$(".addproduct").click(function(){
var len = $(".addproduct").length;
for(var i=0;i<len;i++){
...
}
});
