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

Question

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

它正在工作，但是当我登录“否”按钮并单击它两次时，开发人员工具控制台显示我已单击它3次。就像第一个点击之后的每次点击一样，控制台将其加倍。我无法解决如何分离点击事件并仍然在相同的对话框弹出框内工作？

<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

不要里面点击事件的创建点击事件。正如您发现的那样，每次点击都会添加一个新事件。创建它一次页面加载时：

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

如果你遇到的问题是，元素尚未确定在页面加载时，您可以将事件绑定到一个共同的父，并使用event delegation：

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