按钮点击功能启动两次

button onclick function firing twice

本文关键字：两次 启动 功能 按钮      更新时间：2023-09-26

我有一个按钮，它使用事件处理程序调用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.prventDefault（）和event.stopPropagation（），但都不起作用。

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

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

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

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

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

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

例如：

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

为了防止其他人遇到同样的问题，我遇到了同样的问题。根本原因是有3个按钮具有相同的ID，单击其中一个按钮后，其他两个按钮也启动了它们的OnClick事件。。。

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

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

对我来说，我发现我的事件没有绑定到映射的组件。相关的答案是：为什么我的onClick在渲染时被调用？-React.js，但为了提供一些见解，我复制了下面的一些答案（希望这有帮助！）：

1.使用.bind

activatePlaylist.bind(this, playlist.playlist_id)

2.使用箭头功能

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

3.或从激活播放列表返回功能

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

我的MVC项目也有同样的问题，问题是我已经包含了site.js两次；一次在_Layout.chtml文件中，一次在主cshtml文件的Scripts部分中。移除一个解决了问题。

对于这种类型的错误：

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

在这种情况下，一旦您不再需要侦听，就需要对解除绑定侦听器。

我来这里寻找答案。事实证明，我的并没有发射两次。它会启动，然后当我后来点击其他东西时，它也会因为点击而启动。

我有一个容器div，上面有一个click监听器。在这个div中，有一个可点击的链接。

单击链接还会触发容器的单击事件。

我花了一些时间做解绑/重新绑的实验，但没有什么令人满意的。最后，我只是在容器点击事件中设置了一个条件，这样只有当点击目标不是锚点时，它才会运行：-

    if (e.target.tagName !== 'A') {    
        alert("bob");
        //addToCart($(this).attr("id"));
    });

我的错误是让一个父级的类名与我附加点击事件处理程序的子级的类名相同。这给我带来了一些困惑。

相关文章：