Javascript （jQuery）如何避免在另一个单击事件下注册多个单击事件？

我在删除jQuery对话框弹出窗口的单击事件下有两个单击事件。它现在所做的是，当我单击删除课程时，它会打开一个对话框弹出，我可以单击“是”确认删除，或者单击“否”关闭对话框

它正在工作，但当我记录“否”按钮并单击它两次时，开发人员工具控制台显示我已单击它三次。与第一次单击后的每次单击一样，控制台将其加倍。我无法解决如何分离单击事件，并且仍然在同一弹出对话框中工作

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

..........
@ActionLink（“删除”，“删除”，新建{id=item.CourseID}，新建{@class=“deletebtn”，@id=item.CourseID}）
是否确实要删除此课程

对
不
$（函数（）{
$（.deletebtn”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（'#dialog'）。dialog（）；
var btnobj=$（本）；
var id=btnobj[0].id；
$（“#确认删除”）。在（“单击”上，函数（）{
var token=$（'input[name=“\uu RequestVerificationToken”]”）val（）；
var data={id:id，u RequestVerificationToken:token}；
$.ajax({
类型：“POST”，
url:“@url.Action”（“删除”，“课程”）”，
数据：数据，
//ajaxasync:true，
成功：函数（）{
$（“对话框”）。对话框（“关闭”）；
$（'div.table-content'）.empty（）.load（'.table-content'）；
//控制台日志（“成功”）；
},
错误：函数（）{
console.log（“失败”）；
}
});
});
$（“#中止删除”）。在（“单击”上，函数（）{
控制台日志（“NoClick”）；
$（“对话框”）。对话框（“关闭”）；
});
});
});

不要在单击事件中创建单击事件。正如您所发现的，这将在每次单击时添加一个新事件。在页面加载时创建一次：

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

如果您遇到的问题是加载页面时尚未定义元素，则可以将事件绑定到公共父级并使用：

---

我认为是后一部分。哪一个是父按钮？单击“

”（.deletebtn”）。我不知道你所说的“家长按钮”是什么意思。但是，如果您自己定义这些单击处理程序，而不是在每次单击时重复定义它们，会发生什么呢？问题中的代码并不意味着这些元素是动态创建的，这只是执行您尝试执行的操作的常见原因。当我说“父按钮”时，我指的是您提到的“公共父”。抱歉，由于我是jQuery新手，我对很多术语都不熟悉。。。但是现在，当我在一个函数下分离每个单击事件时，“否”按钮工作正常，因为它只是关闭对话框。但当我确认时，“是”按钮不起作用，无法删除该项。@直截了当：是时候稍微调试一下，缩小“不起作用”的含义了。您可以添加一些
console.log（）
语句来帮助您轻松地完成这项工作。例如，当您绑定其他单击事件时，是否在页面上找到了这些元素？如果它们是由AJAX添加的，那么我的回答后面的部分就有帮助了。或者，如果找到了元素并且它们正在处理单击事件，那么这些事件中有什么失败？“不工作”将需要提供问题的完整复制，但稍微调试一下会更有帮助。不工作意味着它不会在单击“是”时删除我要删除的记录。控制台将其记录为失败。
$(document).on("click", '#confirm-deletion', function () {
    //...
});