Как я могу предотвратить срабатывание функции Ajax несколько раз при нажатии?

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); } }) }); . $(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); } }) }); . $(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); } }) }); . $(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"; } 

Нажимая кнопку «животное» (например, «птица»), я ожидаю, что окно предупреждения будет только один раз. Но каждый раз, когда я нажимаю на животное, окно предупреждения срабатывает все больше и больше раз.