JQuery Click Handlers не работают после загрузки страницы Ajax

Question

У меня есть приложение ASP MVC, где у меня есть частичный вид, который загружается через ajax каждый раз, когда добавляется новый комментарий.

Однако обработчики jquery click больше не работают после загрузки страницы ajax.

<div id="comments"> 
    // Jquery links don't work after ajax page load? 
    <ul> 
     <li> 
      <div></div> 
      <a href="#" class="js-delete-comment" data-comment-id="@Model.comment.Id"> 
       <i class="fa fa-trash-o" aria-hidden="true"></i> Delete 
      </a> 
     </li> 
</div> 

@using (Ajax.BeginForm("Create", "Comments", null, new AjaxOptions 
{ 
     HttpMethod = "POST", 
     LoadingElementId = "create-post-wait", 
     InsertionMode = InsertionMode.Replace, 
     UpdateTargetId = "comments", 
     OnComplete = "AjaxCreatePostComplete()" 
}, new { enctype = "multipart/form-data" })) 
{ 

    @* form details *@ 

} 

Мой Jquery

$(function() { 

     DeleteComment(); 

} 


var DeleteComment = function() { 

    if ($(".js-delete-comment").length === 0) { 
     return; 
    } 

    $(".js-delete-comment").click(function (e) { 
     var a = $(this); // "this" is the <a> 

     window.swal({ 
      title: "Confirm", 
      text: "Are you sure you want to delete this comment?", 
      type: "warning", 
      showCancelButton: true 
     }, 
     function() { 
      $.ajax({ 
       // do stuff 
      }) 
     }); 
     }); 
}; 


var AjaxCreatePostComplete = function() { 
     var createButton = $("#create-post-btn"); 
     if (createButton.length > 0) { 
      createButton.attr("disabled", false); 
     } 

}; 

Answer 1

Использование JQuery on() разница между .The on() и click() что on() работает для динамически добавляемых элементов. Пожалуйста, попробуйте изменить событие своего клика следующим образом:

$(document).on('click','.js-delete-comment',function() { 
    //Add the logic for the click event here 
});