Question

我有一个使用事件处理程序调用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函数我可能会收到错误？

Answer 1

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

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

这适用于所有附加事件（mouseover，mouseout，click，...）

Answer 2

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

Answer 3

从选择器取消绑定事件，并在追加到DOM中的元素后再次触发特定选择器上的事件。 $（＆＃34; selector_name＆＃34;）。unbind（＆＃34; event＆＃34;）; //再次在选择器上调用此事件后..

例如：

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

$("#button").click(function(event) {
console.log("button click again);
});

Answer 4

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

Answer 5

对我来说，我发现我的事件没有绑定到我的映射组件。相关答案是Why is my onClick being called on render? - 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 
  }
}

Answer 6

您可能希望传递事件并添加

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

OR

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

Answer 7

我知道这是一篇过时的文章，但是对于这种类型的错误：

可能您绑定了重复的事件
要么可以将事件处理程序连接两次，要么 ，或者在目标监听器完成监听并完成之后，事件没有被解除绑定他们的工作。

在这种情况下，一旦不再需要收听，您需要做一些事情来取消绑定。

按钮onclick功能触发两次

7 个答案: