jQuery $(".class").click(); - 多个元素,点击一次事件

Question

我在同名页面上有多个类.然后我在我的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

抱怨这个旧线程.我现在遇到了同样的问题,我想分享我的解决方案.

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

event.StopPropagation并event.StopImmediatePropagation()应该做的伎俩.

具有事件处理程序的.class选择器将导致bubbling单击事件(有时为父元素,有时为DOM中的Children元素).

event.StopPropagation()方法确保事件不会冒泡到父元素,而event.StopImmediatePropagation()方法确保事件不会冒泡到所需类选择器的子元素.

来源:https : //api.jquery.com/event.stoppropagation/ https://api.jquery.com/event.stopimmediatepropagation/

Answer 2

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

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

当您使用addproduct类单击div时,将针对该特定元素触发一个事件,而不是五个.如果事件被触发5次,你在代码中做错了什么.

Answer 5

在这种情况下,我会尝试:

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

    //your code here

 });

那么,如果你需要在其他元素中使用相同的类来执行某些操作,那么你可以遍历这些元素:

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

      //your code here
     }
  );
 }
);

Answer 6

我想你添加了五次点击事件.试着算一下你做了多少次.

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

Answer 7

这应该解决它,应该是一个好习惯:.unbind()

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

Answer 8

我只是遇到了同样的问题。在我的例子中，PHP 代码生成了几次相同的 jQuery 代码，这就是多重​​触发器。

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

（PHP MULTIPLE GENERATER NUMBERS 也多次生成相同的代码）

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

我的解决方案是在另一个 php 文件中分离脚本并加载该文件一次。

Answer 9

我通过使用内联jquery函数调用解决了它

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

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