按钮onclick功能触发两次

Posted 2021-04-17

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

答案

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

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

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

另一答案

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

另一答案

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

例如：

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

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

另一答案

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

另一答案

对我来说，我发现我的事件没有绑定到我的映射组件。相关的答案是在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 
  }
}

另一答案

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

$('.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;
});