禁用锚点按钮

Question

我需要帮助，使我的 Anchor 按钮在被单击一次后不可再次单击。

任何帮助都将不胜感激，提前致谢。

HTML 代码：

            <div class="text-center">
            <a role="button" class="btn btn-success" id="createGameButton" onclick="addGame();">Create Coinflip</a>
        </div>

JavaScript 代码：

function addGame() 
{
var side = $("#side").val();
var steamid = $("#steamid").val();
var amount = $("#amount").val();
var buttonText = document.getElementById('createGameButton').innerHTML;

if(buttonText=='Create Coinflip')
{
    $.ajax(
    {
        url: 'addGame.php', 
        type: 'POST', 
        data: 'side=' + side + '&steamid=' + steamid + '&amount=' + amount, 
        dataType: 'text', 
        success: function (data) 
        {
            document.getElementById('game-alert').innerHTML = data;
            $("#game-alert").fadeIn();
            refreshGames();
            document.getElementById('createGameButton').innerHTML = 'Create Coinflip';
        }
    });
}
}

- Calvin Bennett

---

使用jQuery注册一个处理程序，该处理程序仅会被调用一次。 - Arun P Johny

@去往 我尝试了许多方法，例如$("#anchorid").off('click');。 - Calvin Bennett

@ArunPJohny 我不确定该怎么做。 - Calvin Bennett

Answer 1

移除 onclick="addGame();" 并使用 one

.one()

为元素附加事件处理程序。处理程序最多每种事件类型针对每个元素执行一次。

因此：

$('#createGameButton').one("click", addGame);

- BenG

---

我不理解这个。 - Calvin Bennett

Answer 2

在编程中，给你的函数添加一个标志是一种通用的停止执行技术。

function addGame() {
   if(addGame.flag) 
   return;
   addGame.flag = true;
   // rest of procedure ....

• addGame.flag 为函数 addGame 添加一个属性
• 第一次运行时，将 flag 设置为 true
• 一旦 flag 为 true，函数将立即返回

- maioman

---

我添加了这段代码，但它只是破坏了它，并且在我尝试创建游戏时没有创建游戏。 - Calvin Bennett

这是一个示例；但在你的情况下，最好删除监听器...（BenG的回答） - maioman

Answer 3

您可以添加/删除类来适应单击函数的行为。

HTML代码（不包括onclick）

<a role="button" class="btn btn-success" id="createGameButton" >Create Coinflip</a>

JavaScript 代码

$("#createGameButton").click(function(){

  //if we have not clicked already on this link
  if( ! $(this).hasClass("already-clicked") )
  {
      $.ajax(
      {
          /* [...your normal code...] */
          success: function (data)
          {
              /* [...your normal code...] */
              $(this).addClass("already-clicked")
          }
      });
    }
});

- goto

Answer 4

你可以通过在按钮中添加一个类名为“disabled”的类来实现，这里是JSBIN

- fruitjs

---

这是一个 <a> 标签，不是一个按钮。 - Severino Lorilla Jr.

它可以双向工作，他正在使用Bootstrap并为该元素使用btn类，因此它几乎不重要是a还是button或其他任何东西。 - fruitjs

它会这样做，因为它是一个锚点而不是按钮。 - Calvin Bennett

好的，在你的锚点标签中添加“disabled”类，你看到我创建的垃圾桶了吗？它可以工作，你应该使用Bootstrap类来实现这个目的。它只会触发一次你的Ajax请求。 - fruitjs

如果(buttonText=='创建Coinflip') { $('#createGameButton').addClass('disabled');//这将起作用，$.ajax将执行一次，然后它将禁用您的按钮以进行进一步的请求。有许多方法可以实现它，比如可以创建标志，但是正如我之前告诉过你的那样，这是bootstrap，因此请使用bootstrap类来实现这种目的。 - fruitjs