按钮 onclick 函数触发两次

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 函数为什么会出现错误？

原文由 Jason247 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

这适用于所有附加事件（鼠标悬停、鼠标移开、单击……）

原文由 Mike Vranckx 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

原文由 user1491819 发布，翻译遵循 CC BY-SA 3.0 许可协议