(jQuery) 如何避免在另一个点击事件下注册多个点击事件？

Question

I have 2 click events under one click event for a Delete jQuery dialog popup. What it is doing right now that when I click delete a Course, it opens up a dialog popup, and I can either click "Yes" to confirm deletion, or "No" to close the dialog box.

It is working, but when I log the "No" button and click it twice, the Developer Tools Console shows I have clicked it 3 times. Like each click after the first one, the console doubles it. I am not being able to work out on how to separate the click events and still work inside of the same dialog popup box?

<div class="table-content">

..........
   @Html.ActionLink("Delete", "Delete", new { id = item.CourseID }, new {   @class = "deletebtn", @id = item.CourseID })

</div>

<div id="dialog" title="Delete Department" style="display: none">
    <p>Are you sure you want to delete this Course?</p>
    <button id="confirm-deletion">Yes</button>
    <button id="abort-deletion">No</button>
</div>

<script>
    $(function () {
        $(".deletebtn").on("click", function (e) {
            e.preventDefault();
            $('#dialog').dialog();

            var btnobj = $(this);
            var id = btnobj[0].id;

            $('#confirm-deletion').on("click", function () {

                var token = $('input[name="__RequestVerificationToken"]').val();
                var data = { id: id, __RequestVerificationToken: token };

                $.ajax({
                    type: "POST",
                    url: "@Url.Action("Delete","Course")",
                    data: data,
                    //ajaxasync: true,
                    success: function () {
                        $("#dialog").dialog("close");
                        $('div.table-content').empty().load(' .table-content');
                        //console.log("success");
                    },
                    error: function () {
                        console.log("failed");
                    }
                });
            });
            $('#abort-deletion').on("click", function () {

                console.log("NoClick");

                $("#dialog").dialog("close");
            });
        });
    });
</script>

Answer 1

Don't create a click event inside of a click event. This will, as you've found, add a new event with every click. Create it once when the page loads:

$(function () {

    $(".deletebtn").on("click", function (e) {
        e.preventDefault();
        $('#dialog').dialog();

        var btnobj = $(this);
        var id = btnobj[0].id;

        // don't create click events here

    });

    $('#confirm-deletion').on("click", function () {
        //...
    });


    $('#abort-deletion').on("click", function () {
        //...
    });
});

If the problem you encounter is that the elements aren't yet defined when the page loads, you can bind the event to a common parent and use event delegation :

$(document).on("click", '#confirm-deletion', function () {
    //...
});

Answer 2

let clickRegistered = false;

  $(".deletebtn").on("click", function (e) {
       if(!clickRegistered){
            clickRegistered = true;
            //... registerComponents/call functions ...
       }
  });

clickRegistered is used to make sure that function body wil execute only once.