51

我有一个使用事件处理程序调用 javascript 函数的按钮。由于某种原因，事件处理程序被调用了两次。

这是我的按钮（我使用 php 对象来生成代码，这就是为什么有很多空标签的原因）：

<button name="addToCart" value="" size="" onclick="" src="" class="addToCartButton" id="0011110421111" type="button" formtarget="_self" formmethod="post" formaction="" data-mini="true" width="" height="" placeholder="" data-mini="1" onkeypress="" >Add To Cart</button>

这是我的事件处理程序：

$('.addToCartButton').click(function() {
    alert("bob");
    //addToCart($(this).attr("id"));
});

在这里，我收到两次警报。

我曾尝试在按钮的 onclick 属性中调用函数 addToCart ，但如果我这样尝试，我会收到此错误：

TypeError: '[object HTMLButtonElement]' is not a function (evaluating 'addToCart(0011110421111)')

我也尝试过 event.preventDefault() 和 event.stopPropagation()，但都没有奏效。

任何想法为什么会发生这种情况，或者我可以做些什么来阻止它执行两次，或者如果我从 onclick="" 调用 javascript 函数可能会出现错误？

4

8 回答 8

112

也许您在同一个按钮上附加了两次事件。您可以做的是取消绑定任何以前设置的点击事件，如下所示：

$('.addToCartButton').unbind('click').click(function() {
    alert("bob");
    //addToCart($(this).attr("id"));
});

这适用于所有附加事件（鼠标悬停，鼠标悬停，单击，...）

于 2013-11-18T18:20:57.180 回答
15

我的事件触发了两次，因为我不小心同时包含了 my_scripts.js 和 my_scripts.min.js。确保您只包括一个。

于 2015-01-23T23:51:53.173 回答
8

从选择器取消绑定事件并在 DOM 中的元素中再次附加触发特定选择器上的事件.. $("selector_name").unbind("event"); //在选择器上再次调用此事件之后..

例如：

$( "#button" ).unbind( "click" );

$("#button").click(function(event) {
console.log("button click again);
});
于 2016-06-16T12:07:11.560 回答
7

只是为了记录以防其他人遇到同样的问题，我遇到了同样的问题，根本原因是有3个按钮具有相同的ID，点击一个后，另外两个也触发了他们的OnClick事件......

于 2016-07-07T21:39:56.830 回答
2

对我来说，我发现我的事件没有绑定到我的映射组件。相关答案是为什么我的 onClick 在渲染时被调用？- React.js，但为了提供一些见解，我复制了下面的一些答案（希望这会有所帮助！）：

1.使用.bind

activatePlaylist.bind(this, playlist.playlist_id)

2.使用箭头功能

onClick={ () => this.activatePlaylist(playlist.playlist_id) }

3.或者从activatePlaylist返回函数

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}
于 2017-10-17T15:05:47.487 回答
1

您可能想要传递事件并添加

$('.addToCartButton').click(function(e) {
  e.preventDefault(); //Added this
  alert("bob");
  //addToCart($(this).attr("id"));
});

或者

$('.addToCartButton').click(function(e) {
  e.preventDefault(); //Added this
  alert("bob");
  //addToCart($(this).attr("id"));
  return false;
});
于 2013-11-18T18:22:07.150 回答
0

对于这种类型的错误：

  • 可能是您绑定了重复的事件
  • 在预期的侦听器完成侦听并完成其工作之后，事件处理程序可能会被连接两次，或者事件可能不是未绑定的。

在这种情况下，一旦不再需要收听，您就需要做一些事情来解除监听器的绑定。

于 2020-05-22T06:49:41.790 回答
0

我来这里是为了寻找答案。事实证明，我的并没有完全发射两次。它会触发，然后当我稍后单击其他内容时，它也会触发该点击。

我有一个带有点击监听器的容器 div。在那个 div 里面，有一个可点击的链接。

单击链接也会触发容器的单击事件。

我花了一些时间进行 unbind('click') / rebind 实验，但没有什么令人满意的。最后，我只是在容器点击事件中添加了一个条件，以便它仅在点击目标不是锚点时运行：-

    if (e.target.tagName !== 'A') {    
        alert("bob");
        //addToCart($(this).attr("id"));
    });
于 2021-12-22T18:02:18.673 回答