Javascript 按钮点击功能触发两次

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

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

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

我曾尝试在按钮的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"));
});

---

这适用于所有附加的事件（mouseover、mouseout、click等）

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

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

或

---

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

从选择器中取消绑定事件，并在DOM中的元素中追加后再次触发特定选择器上的事件。。 $（“选择器名称”）。解除绑定（“事件”）//在选择器上再次执行此调用事件后

例如：

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

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

---

如果其他人有相同的问题，我也有相同的问题，根本原因是有3个按钮具有相同的ID，单击一个按钮后，其他两个按钮也触发了OnClick事件…

对于我来说，我发现我的事件没有绑定到映射组件。相关答案在，但为了提供一些见解，我复制了下面的一些答案（希望这有帮助！）

1.使用.bind

activatePlaylist.bind(this, playlist.playlist_id)

2.使用箭头功能

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

3.或activatePlaylist中的返回函数

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}

---

我知道这是一篇老文章，但对于这种错误：

• 可能是您绑定了重复的事件
• 在预期的侦听器完成侦听并完成其工作后，事件处理程序可以连接两次，或者事件没有解除绑定

---

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

您可能正在调用分配两次事件的代码！JSFIDLE会更好为什么有这么多空白属性？数据（$（“.addToCartButton”）[0]，“events”）.length告诉您什么？它应该返回绑定到按钮的事件数。我的错误。这样做：打开Chrome浏览器，转到您的网站，点击F12，单击

控制台

选项卡并粘贴此：

$。\u数据（$（“.addToCartButton”）[0]，“事件”）

。包含绑定到按钮的所有事件的对象将打印到控制台。

click

属性应该是一个包含多个元素的数组。展开它们中的每一个并右键单击处理程序函数。选择“showfunctiondefinition”，您应该看到每个处理程序在代码中的定义位置。这样，您应该可以找到您的副本..off（）.on（）可能更为流行，因为这个答案可能有效，所以我将不

-1

它。但我强烈反对通过撤销而不是找到真正的问题并消除它来修复问题。@matewka我也将继续寻找实际问题。谢谢你的建议。@matewka好的，我在评论下面回复了。@matewka：谢谢你的建议，谢谢。它避免了我把代码弄乱。Imho，答案不应该是-1，因为它指出了一个不太明显的问题，许多人可能会这样做：在同一个对象上设置两次事件侦听器。OP说这没有帮助。OP说preventDefault，他没有说任何关于返回false的内容。无论如何，

preventDefault

不是一个属性，而是一个函数。

activatePlaylist.bind(this, playlist.playlist_id)

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

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}