Question

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

update.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";  
}

点击一个动物按钮（例如＆＃34; bird＆＃34;）我希望警报框只触发一次。但是每当我点击一只动物时，警报框就会越来越多地发射。

Answer 1

试试这种方式。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

试试这个..'解开'

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

  //do here ..
  })

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

更改您的点击事件。使用＆＃34;一个＆＃34;而不是＆＃34; on＆＃34; .Refer Jquery Docs它只会执行一次点击事件。参考下面的例子

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

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

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

5 个答案: