Запрос Ajax отправляется более одного раза в действии DataTable Delete - ASP.NET, JQuery, Ajax

Question

AJAX отправлял более одного запроса каждый раз, когда вызывается функция (ASP.NET MVC, Ajax и JQuery)

У меня есть веб-страница с таблицей (с использованием JQuery Datatable) и каждой строкой в ​​таблицеимеет кнопку удаления, которая содержит идентификатор каждой строки.Идентификатор используется для отправки запроса на удаление в веб-API (в том же проекте), и, если идентификатор правильный, он удалит строку.

Он отлично работает, если я использую только один раз кнопку,Однако, если я нажимаю кнопку для одной строки (чтобы она была удалена), а затем, чтобы удалить другую строку, я понял, что запрос отправляется дублированно в веб-API с идентификатором предыдущего и текущего вызова.,

По этой причине сервер выдаст ошибку NotFound для идентификатора, который был удален, и для текущего идентификатора он просто удалится.Если я повторю с другой кнопкой, он отправит три запроса на удаление.

Я не эксперт по Javascript (или ajax или jquery), поэтому я не мог понять, что я могу сделать, чтобыреши это.(Я видел похожие посты, но я не мог найти что-то, что работает в моем случае)

HTML для создания каждой строки:

// Note that it uses a data-customer-id to data attribute to hold the value
foreach (var customer in Model) {
    <tr>
        <td>
            // ( unrelated code) 
            // DELETE BUTTON
            <button type="button" class="btn btn-link js-delete" 
                    data-customer-id="@customer.Id" data-toggle="tooltip"         
                    data-placement="right" title="Using JQuery & AJAX">Delete
            </button>
        </td>
    </tr>
}

Javascript:

<script>
    $(document).ready(function() {
        $("#customers").on("click", ".js-delete",function() {
            //getting a reference for the button to be used when it's clicked
            var button = $(this);

            // call the modal (display the dialog box on the screen)
            $("#deleteModal").modal();

            // if the deleteConfirm button is clicked
            $("#deleteConfirm").on("click", function () {
                var urlLog = button.attr("data-customer-id");
                $.ajax({
                        url: "/api/customers/" + button.attr("data-customer-id"),
                        method: "DELETE",       
                        success: function () {
                            // case it's success, remove the row from the table
                            button.parents("tr").remove();
                        }
                });
                // hide de modal (dialog box)
                $("#deleteModal").modal("hide");
            });      
        });
    });
</script>

Ouput на вкладке Сеть в браузере

Я ожидал, что каждый щелчок по кнопке удаления будет отправлять только один запросWebApi, а не несколько запросов.

Answer 1

Это происходит потому, что вы подключаете прослушиватель событий к элементу #deleteConfirm каждый раз, когда нажимаете .js-delete.

Выполните рефакторинг и переместите вашу функцию $("#deleteConfirm").on("click", function () ... за пределы блока $("#customers").on("click", ".js-delete",function() ....

Answer 2

Я изменил свой код в соответствии с предложением выше и разделил обе функции щелчка.

Ps.Если бы я сохранил обе функции, как они были в начале, одну внутри другой, я мог бы использовать этот код для функции второго щелчка, он также работает

$("#deleteConfirm").off().bind("click", function ()

В конце концов, финальный скрипт был:

$(document).ready(function() {

        $("#customers").on("click", ".js-delete",function() {
                //getting a reference for the button to be used when it's clicked
            var button = $(this);

            // STORE THE REFERENCE TO THE BUTTON
            $("#deleteConfirm").data('ref', button);
            // call the modal (display the dialog box on the screen)
            $("#deleteModal").modal();

        });

$("#deleteConfirm").on("click", function () {
                //var button = $("#customers .js-delete");
                // get the reference to the button
                var button = $(this).data('ref');
                $.ajax({

                    //url: "/api/customers/" + button.attr("data-customer-id"),
                    url: "/api/customers/" + button.attr("data-customer-id"),
                    method: "DELETE",       
                    success: function () {
                        // case it's success, remove the row from the table

                        button.parents("tr").remove();                                
                    }
                });


                // hide de modal (dialog box)
                $("#deleteModal").modal("hide");
            });      

        });