jquery 如何删除单击事件处理程序？

在下面的js代码中，当用户点击一个链接时，他们应该得到一个确认模式来批准这个动作。
然而，有一个错误，如果用户单击一个链接，确认模式会显示，然后如果他们单击另一个链接，另一个模式会出现。如果他们确认发送了模式2请求。
当一个Modal打开时，我如何删除其他链接的点击事件？

$(function () {

    $.ajaxSetup({ cache: false });

    $('a[data-bs-toggle="modal"][requires-confirmation]').on('click', function (e) {
       
      //***************************************
      //trying to prevent click event propagation
      //***************************************

         e.stopPropagation();
         e.preventDefault();
      //***************************************
        var url = $(this).attr('href'); 
        
        var hasDataDelete = $(this).is('[data-delete]');
        var deleteAction = $(this).attr('data-delete') === 'true';

        $('#confirmModal').modal('show');

        $("#errorContainer").hide();
        $('#confirmMessage').show();
        $('#confirmButton').show();
    
        if (deleteAction) {
            $('#checkboxContainer').show();
            $('#confirmCheckbox').prop('checked',false);
            $('#confirmButton').prop('disabled', true);
        } else {
            $('#checkboxContainer').hide();
            $('#confirmButton').prop('disabled', false);
        }
        $('#confirmCheckbox').change(function () {
            $('#confirmButton').prop('disabled', !$(this).is(':checked'));
        });

         
        $('#confirmButton').click(function (e) {
           
            e.preventDefault();

            $.ajax({
            url: url,
            type: 'POST',
            success: function (result) {
                if (result.success == 1) {
                    location.reload();
                }
                else {
                    $("#errorContainer").html('<p> Errore:' + result.error + '</p>')
                    $("#checkboxContainer").hide();
                    $('#confirmMessage').hide();
                   
                    $('#confirmButton').hide();
                }
            },
                error: function (xhr, status, error) {
                    $("#errorContainer").html('<p> Errore:' + error + '</p>')
                    $("#checkboxContainer").hide();
                    $('#confirmMessage').hide();
                
                $('#confirmButton').hide();
            }
        });
        });
    });

});

字符串
检视

@using GESTPREF.Models.ViewModels
@using GESTPREF.Models.Enums
@using GESTPREF.Helpers

@model  IEnumerable<GruppoDisplayViewModel>

@{
    ViewBag.Title = "Elenco gruppi/livelli";
}

<h2>@ViewBag.Title</h2>


@{

    var badgeClasses = new Dictionary<StatoRecord, string>()
{
        { StatoRecord.Attivo, "badge bg-success" },
        { StatoRecord.Inattivo, "badge bg-warning text-dark" },
        { StatoRecord.Cancellato , "badge bg-danger" }
    };
}

<div class="d-flex justify-content-end align-items-center mb-2">

    @Html.BootstrapActionLink("Crea", "Create", "Gruppi", "bi bi-plus-circle", "Crea nuovo gruppo",null, new { @class = "btn btn-primary" })

</div>

<table class="table table-bordered table-sm">
    <thead class="table-light text-dark">
        <tr>
            <td>Gruppo</td>
            <td>Livelli</td>
            <td>Stato</td>
            <td>Azioni</td>
        </tr>
    </thead>
    <tbody>
        @foreach (var gruppo in Model)
        {
            <tr>
                <td class="align-top">
                    <table class="table-sm table-borderless">
                        <tr>
                            <td><i>@gruppo.Codice</i></td>
                        </tr>
                        <tr>
                            <td class="fw-bold">@gruppo.Nome</td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table class="table-sm table-borderless">
                        @foreach (var livello in gruppo.Livelli)
                        {
                            <tr>
                                <td><i>@livello.Codice</i></td>

                                <td class="fw-bold">@livello.Nome</td>
                            </tr>
                        }
                    </table>
                </td>
                <td>
                    <span class="@badgeClasses[@gruppo.Stato]">@gruppo.Stato.ToString()</span>
                </td>
                <td>

                    @if (gruppo.Stato == StatoRecord.Attivo)
                    {
                        @Html.BootstrapActionLink("", "Edit", "Gruppi", "bi bi-pencil", "Modifica gruppo",
                       routeValues: new { id = gruppo.Id },
                       htmlAttributes: new { @class = "btn btn-primary btn-sm" })

                        @Html.Raw("&nbsp");

                        @Html.BootstrapActionLink("", "Disattiva", "Gruppi", "bi bi-toggle-on", "Disattiva gruppo",
                          routeValues: new { id = gruppo.Id },
                          htmlAttributes: new
                          {
                              @class = "btn btn-outline-warning btn-sm",
                              data_bs_toggle = "modal",
                              requires_confirmation = "true"
                          })

                    }
                    else if (gruppo.Stato == StatoRecord.Inattivo)
                    {
                        @Html.BootstrapActionLink("", "Attiva", "Gruppi", "bi bi-toggle-off", "Attiva gruppo",
                          routeValues: new { id = gruppo.Id },
                          htmlAttributes: new
                          {
                              @class = "btn btn-outline-success btn-sm",
                              data_bs_toggle = "modal",
                              requires_confirmation = "true",
                          })

                        @Html.Raw("&nbsp");

                        @Html.BootstrapActionLink("", "Cancella", "Gruppi", "bi bi-trash", "Cancella gruppo",
                          routeValues: new { id = gruppo.Id },
                          htmlAttributes: new
                          {
                              @class = "btn btn-outline-danger btn-sm",
                              data_bs_toggle = "modal",                              
                              requires_confirmation = "true",
                              data_delete = "true"
                          })

                    }

                </td>

            </tr>
        }
    </tbody>
</table>


<div id="confirmModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Conferma operazione</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
            </div>
            <div class="modal-body">
                <p id="confirmMessage">Sei sicuro di voler procedere?</p>

                <div id="checkboxContainer" style="display: none;">
                    <p class="text-danger">ATTENZIONE : La cancellazione è un'operazione irreversibile!</p>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="confirmCheckbox">
                        <label class="form-check-label" for="confirmCheckbox">Ho capito e confermo</label>
                    </div>
                </div>
                <div id="errorContainer"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
                <button type="button" class="btn btn-primary" id="confirmButton" disabled>Conferma</button>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    <script src="~/Scripts/confirm-modal.js"></script>

}

型
我修改了我的代码如下：

$(function () {

    $.ajaxSetup({ cache: false });


    $('a[data-bs-toggle="modal"][requires-confirmation]').on('click', function (e) {
        //e.stopPropagation();
        e.preventDefault();
        
       

        var url = $(this).attr('href'); 
        

        var hasDataDelete = $(this).is('[data-delete]');
        var deleteAction = $(this).attr('data-delete') === 'true';

        $('#confirmModal').modal('show');

        $("#errorContainer").hide();
        $('#confirmMessage').show();
        $('#confirmButton').show();

        if (deleteAction) {
            $('#checkboxContainer').show();
            $('#confirmCheckbox').prop('checked',false);
            $('#confirmButton').prop('disabled', true);
        } else {
            $('#checkboxContainer').hide();
            $('#confirmButton').prop('disabled', false);
        }
        $('#confirmCheckbox').change(function () {
            $('#confirmButton').prop('disabled', !$(this).is(':checked'));
        });

    });

    $('#confirmButton').on('click',function (event) {

        event.preventDefault();

        $.ajax({
            url: url,
            type: 'POST',
            success: function (result) {
                if (result.success == 1) {
                    location.reload();
                }
                else {
                    $("#errorContainer").html('<p> Errore:' + result.error + '</p>')
                    $("#checkboxContainer").hide();
                    $('#confirmMessage').hide();

                    $('#confirmButton').hide();
                }
            },
            error: function (xhr, status, error) {
                $("#errorContainer").html('<p> Errore:' + error + '</p>')
                $("#checkboxContainer").hide();
                $('#confirmMessage').hide();

                $('#confirmButton').hide();
            }
        });
    });

});

型
这就是我想要的：
1.用户单击链接（href具有要调用的actionmethod的URL）
1.模态确认对话框打开
1.只有当用户单击确认按钮时，请求才会被发送到服务器
对于我前面的代码，如果我理解@Salman所说的，每次我向同一个按钮添加事件时，都会发送多个请求。
但是现在在我的新代码中，显然，url vriable没有定义，也没有发送请求。

jquery 如何删除单击事件处理程序？

1条答案

相关问题

热门标签

最新问答