按钮 onclick 函数触发两次

2022-01-15 00:00:00 event-handling javascript htmlbutton

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

I have a button that calls a javascript function using an event handler. For some reason, the event handler is being called twice.

这是我的按钮(我使用 php 对象来生成代码，这就是为什么有很多空标签的原因):

Here is my button (I am using a php object to generate the code, that's why there are a lot of empty tags):

<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>

这是我的事件处理程序:

Here is my event handler:

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

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

Here, I am getting the alert twice.

我曾尝试在按钮的 onclick 属性中调用函数 addToCart，但如果我这样尝试，我会收到此错误:

I have tried calling the function addToCart in the button's onclick property, but if I try it that way, I get this error:

TypeError: '[object HTMLButtonElement]' is not a function (evaluating 'addToCart(0011110421111)')

我也尝试过 event.preventDefault() 和 event.stopPropagation()，但都没有成功.

I have also tried event.preventDefault() and event.stopPropagation(), and neither worked.

任何想法为什么会发生这种情况，或者我可以做些什么来阻止它执行两次，或者如果我从 onclick="" 调用 javascript 函数可能会出现错误?

Any ideas why this is happening, or what I can do to stop it from executing twice, or maybe why I am getting an error if I call the javascript function from onclick=""?

推荐答案

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

Maybe you are attaching the event twice on the same button. What you could do is unbind any previously set click events like this:

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

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

This works for all attached events (mouseover, mouseout, click, ...)

相关文章