(jQuery) Comment éviter d'enregistrer plusieurs événements de clic sous un autre événement de clic?

Question

J'ai 2 événements de clic sous un événement de clic pour une fenêtre de dialogue Supprimer jQuery. Qu'est-ce qu'il fait maintenant que lorsque je clique sur Supprimer un cours, il ouvre une boîte de dialogue, et je peux soit cliquer sur "Oui" pour confirmer la suppression, ou "Non" pour fermer la boîte de dialogue.

Cela fonctionne, mais lorsque je me connecte le bouton "Non" et que je clique deux fois dessus, la console des outils de développement montre que je l'ai cliqué 3 fois. Comme chaque clic après le premier, la console le double. Je ne suis pas en mesure de travailler sur la façon de séparer les événements de clic et encore travailler à l'intérieur de la même boîte de dialogue popup?

<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

Ne créez pas un événement click intérieur d'un événement de clic. Ceci, comme vous l'avez constaté, ajoute un nouvel événement à chaque clic. Créer une fois quand la page se charge:

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

Si le problème que vous rencontrez est que les éléments ne sont pas encore définis lorsque la page se charge, vous pouvez lier l'événement à un parent commun et utiliser event delegation:

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