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