如何使用javascript阻止onclick触发两次答案

【问题标题】：how to stop onclick from firing twice using javascript如何使用javascript阻止onclick触发两次
【发布时间】：2013-10-25 11:40:16
【问题描述】：

function save_team()
{
      $('#saveBtn').unbind('click');

      $.ajax(
      {        
        type: "POST",
        url: "save.php",
        data: { team_Array : t_pls },

          success: function(data) {
              $('#msg').text(data);
          }
      });    
}

<input type="submit" value="SAVE" id="saveBtn" onclick="save_team()">

我搜索，找到了一些解决方案，但它们不起作用。如何防止 SAVE 按钮/onclick 事件触发两次？我正在尝试在 mysql 中保存 10 名玩家的团队。如果团队相同并且发生 onclick 事件，则不应发生任何事情。有人建议我在 PHP 脚本中执行此操作（在我的情况下为 save.php）。但我想不出完美的解决方案。

我想我必须使用 php 来做到这一点。当团队没有改变时，onclick 事件应该被禁用，当团队发生变化时，应该进行 ajax 调用，并且应该将团队保存在数据库中。因此， one() 调用或禁用 attr。在这里帮不上忙。请建议一些 php 脚本帮助。

【问题讨论】：

您可以在单击按钮后禁用该按钮
将处理程序与.one()绑定，使其只触发一次

标签： javascript php jquery mysql ajax

【解决方案1】：

用于禁用按钮。

$('#Btn').attr('disabled',true);

【讨论】：

【解决方案2】：

HTML

<input type="button" value="SAVE" id="saveBtn" onclick="save_team()">

JavaScript

$('#saveBtn').attr('disabled','disabled')

当响应从 ajax 返回时禁用按钮并启用。

【讨论】：

【解决方案3】：

简单的解决方案是禁用按钮并在回调时启用它。

$('#saveBtn').attr('disabled','disabled')

【讨论】：

【解决方案4】：

我建议在第一次单击该按钮后禁用该按钮。在ajax调用之前。我们必须小心启用成功和错误按钮。您也可以使用完整的 AJAX 调用来启用按钮。

           {
                   $('#btnId').attr("disabled", true);
                  // make the AJAX call..
                  $('#btnId').attr("disabled", false);
           }

【讨论】：

【解决方案5】：

使用jquery一：

$( "#saveBtn" ).one( "click", function() {
   save_team();
});

【讨论】：

【解决方案6】：

我建议做三件事。首先禁用按钮，一旦它被点击。

$('#saveBtn').attr('disabled','disabled');

其次使用 one() 绑定点击处理程序

$("#saveBtn").one('click', save_team);

第三，这是将业务逻辑放在你的 UI 中，所以如果它必须在那里，那么检查应该在你的服务器上的 php 中重复。

【讨论】：

【解决方案7】：

使用jQuery的一种方法

$('#saveBtn').one('click', save_team)

【讨论】：

【解决方案8】：

您必须取消在您的函数中返回false 并在您的onclick 属性值中返回它的自动表单提交：

function save_team()
{
    //$('#saveBtn').unbind('click');    I think this line is not needed anymore
    $.ajax(
    {        
        type: "POST",
        url: "save.php",
        data: { team_Array : t_pls },

        success: function(data) {
            $('#msg').text(data);
        }
    });
    return false;
}

<input type="submit" value="SAVE" id="saveBtn" onclick="return save_team()">

【讨论】：

【解决方案9】：

禁用按钮并在成功或错误时重新启用它。

【讨论】：