为什么删除按钮 ajax 调用的 onClick 在按钮被附加到 div 元素后不起作用？

Question

在加载页面上，我通过 AJAX 调用附加评论，所有评论都已成功发布。所有评论都有各自的删除按钮，带有共同的 class 和唯一的 ID。所以 Onclick 的删除按钮我想删除相应的评论，但是它的访问权限没有进入 AJAX 调用。我也尝试过 alert 但它不起作用我不知道为什么。我做错了什么？

 <script>
    $(document).ready(function () {
    
    var AddtasksId = $('#submitBtn4comment').attr('data-taskId');
    
    $.ajax({
      type: "GET",
      url: "/getComments",
      dataType: "json",
      data: {
        AddtasksId: AddtasksId
      },
      contentType: "application/json",
      success: function(response){
    $.each(response, function(key,comment) {
    appendToDom(comment);
         });
    }
    });
    
    });
    
    function appendToDom(data) {
        let lTag = document.createElement('li')
        lTag.classList.add('comment', 'mb-3')
    
        let markup = `
        <div class="card border-light mb-3">
            <div class="card-body">
                <h5>${data.username}</h5>
                <p style="background-color:#E8E8E8">${data.comment}</p>
                <div><h6>⏲️ ${data.commentDate}<span class="pull-right"></span></h6></div>
                <a href="/deleteComment" id="${data._id}" class="deleteComments">Delete Comment</a>
                <div id="line"><hr  style="" /></div>
            </div>
        </div>
        `
        lTag.innerHTML = markup
    
        $(".comment__box").prepend(lTag);
    }
    
    </script>

html div 附加的标签：

<div class="row">
    <div class="col-md-12">
        <!-- <div class="typing text-success"></div> -->
        <ul class="comment__box commonText">
        </ul>


</div>
</div>

这是AJAX删除评论的呼吁：但是在单击 <a> 按钮时访问没有出现意味着 alert 没有弹出。

$(".deleteComments").on("click", function() {

  alert("First alert");

    var id = $(this).prop("id");
    var AddtasksId = $('#submitBtn4comment').attr('data-taskId');

  $.ajax({
    type: "GET",
    url: "/deleteComment",
    dataType: "json",
    data: {
      AddtasksId: AddtasksId,
      id:id
    },
    contentType: "application/json",
    success: function(response){
    if(response.status == 200)
    window.location.reload();
  }
  });
})

Answer 1

没有触发点击事件，因为定义事件时元素不存在

你可以这样解决：

$(document).on("click", ".deleteComments", function() {

为什么删除按钮 ajax 调用的 onClick 在按钮被附加到 div 元素后不起作用？

Why onClick of delete button ajax call is not working after the button is being appended into the div element?

ajax

jquery

prepend

node.js

handlebars.js