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

的index.php

Cat 
 

的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); } }) }); 

update.php

 if ($table == "cat") { echo "Dog"; } if ($table == "dog") { echo "Dogbird"; } if ($table == "bird") { echo "nothing"; } 

通过点击动物按钮（例如“鸟”），我预计警报框只会触发一次。 但是每当我点击一只动物时，警报框就会越来越多地发射。

Answer 1

试试这个..’解开’

  $('#updateUser').unbind('click').click(function () { //do here .. }) 

Answer 2

试试这种方式。

 $('#do-something').click(function(e) { var me = $(this); e.preventDefault(); if ( me.data('requestRunning') ) { return; } me.data('requestRunning', true); $.ajax({ type: "POST", url: "", data: $("#form").serialize(), success: function(msg) { //stuffs }, complete: function() { me.data('requestRunning', false); } }); }); 

Answer 3

在.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); } }) }); 

Answer 4

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

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

  Click me(Executes once) Click me(Executes multiple times) 

Answer 5

而不是.on你可以使用.one方法的jquery。