按钮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函数我可能会收到错误？

Answer 1

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

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

这适用于所有附加事件(鼠标悬停,鼠标移动,单击,...)

Answer 2

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

Answer 3

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

例如:

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

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

Answer 4

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