如何防止我的 Ajax 函数在点击时触发多次？答案

【问题标题】：How can I prevent my Ajax function to fire multiple times on click?如何防止我的 Ajax 函数在点击时触发多次？
【发布时间】：2017-04-19 10:33:57
【问题描述】：

index.php

   <button class="cat" data-table="cat" >Cat</button>
   <div class="animals"></div>

script.js：

$(document).on("click", ".cat", function (event) {
    alert("cat");
    var table = $(this).data('table');
    $.ajax({
        url: "update.php",
        data: {

            table: table,
        },
        type: "POST",
        success: function (data) {
            $(".animals").html(data);
        }
    })
});

    $(document).on("click", ".dog", function (event) {
        alert("dog");
    var table = $(this).data('table');
    $.ajax({
        url: "update.php",
        data: {

            table: table,
        },
        type: "POST",
        success: function (data) {
            $(".animals").html(data);
        }
    })
});

   $(document).on("click", ".bird", function (event) {
       alert("bird");
    var table = $(this).data('table');
    $.ajax({
        url: "update.php",
        data: {

            table: table,
        },
        type: "POST",
        success: function (data) {
            $(".animals").html(data);
        }
    })
});

更新.php

if ($table == "cat") {
    echo "<button class='dog' data-table='dog'>Dog</button>";   
}
if ($table == "dog") {
    echo "<button class='dog' data-table='dog'>Dog</button><button class='bird' data-table='bird'>bird</button>";   
}

if ($table == "bird") {
   echo "nothing";  
}

通过单击动物按钮（例如“鸟”），我希望警报框只触发一次。但是每次我点击动物时，警报框都会发出越来越多的声音。

【问题讨论】：

你可以试试这个。 $(document).off('click').on("click", ".cat".....
我很困惑，当您编写了 3 个完全独立的事件处理程序，每个都有自己的警报时，为什么您会期望只看到一个警报？
@DavinderKumar 对其进行了测试。该按钮现在不再起作用了
@freedomn-m 不是我的意思：我点击“鸟”然后它只提醒一只“鸟。但它提醒鸟鸟鸟
啊，谢谢你的澄清。

标签： php jquery ajax

【解决方案1】：

试试这个 ..'解除绑定'

 $('#updateUser').unbind('click').click(function () { 

  //do here ..
  })

【讨论】：

谢谢 Jarla :) #lovetohelpother。
是否可以像$(document).on("click", ".dog", function (event) {那样使用“unbind”和“document on click”
试试这个 $(document).unbind('click').on('click', '#submitUser' , function () { // do here})
谢谢，已经测试过了，但我的脚本不再工作了。一定有什么问题，如果我弄清楚了，我告诉你

【解决方案2】：

更改您的点击事件。使用“one”而不是“on”。参考Jquery Docs 它只会执行一次您的点击事件。参考下面的例子

 $(document).one("click","#btn1",function(){
        alert("button btn1 clicked");
    });
    
    $(document).on("click","#btn2",function(){
        alert("button btn2 clicked");
    });

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js">
</script>

<button id="btn1">Click me(Executes once)</button>

<button id="btn2">Click me(Executes multiple times)</button>

【讨论】：

不幸的是，这不起作用，因为我需要能够再次单击按钮。我只是想防止一键触发多次
要多次调用ajax函数？？
点击时只有一次。如果我单击“鸟”，则不再有“狗”和“鸟”按钮。所以我当然希望能够再次单击“猫”以再次获取按钮

【解决方案3】：

试试这个方法。

$('#do-something').click(function(e) {
    var me = $(this);
    e.preventDefault();

    if ( me.data('requestRunning') ) {
        return;
    }

    me.data('requestRunning', true);

    $.ajax({
        type: "POST",
        url: "<url>",
        data: $("#form").serialize(),
        success: function(msg) {
            //stuffs
        },
        complete: function() {
            me.data('requestRunning', false);
        }
    });      
});

【讨论】：

我用“猫”按钮对其进行了测试，但“猫”按钮不再起作用。你能举一个我的猫按钮的例子吗？
在你的按钮中添加 data-requestRunning
你的意思是这样吗？
对，取决于“data-requestRunning”值你可以改变JS逻辑。

【解决方案4】：

在 .on() 之前尝试使用 .off()，如下所示：

$(document).off().on("click", ".dog", function (event) {
        alert("dog");
    var table = $(this).data('table');
    $.ajax({
        url: "update.php",
        data: {

            table: table,
        },
        type: "POST",
        success: function (data) {
            $(".animals").html(data);
        }
    })
});

【讨论】：

你确定这是.off() 的正确语法吗？
因为它使用事件委托，这将关闭页面上的所有委托点击...这不太可能是您真正想要的。
试试 $('body').on('click', '.dog', function({ // 随便做 }))
对不起@Jarla，正确的语法是 $('body').on('click', '.dog', function(){ alert('new dog') })

【解决方案5】：

你可以使用jquery的.one方法来代替.on。

【讨论】：

不幸的是，这不起作用，因为我需要能够再次单击按钮。我只是想防止一键触发多次
好的，你也可以在 ajax 触发之前添加一些默认变量