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

【问题标题】：Why onClick of delete button ajax call is not working after the button is being appended into the div element?为什么在将按钮附加到 div 元素后，删除按钮 ajax 调用的 onClick 不起作用？
【发布时间】：2021-01-13 23:39:41
【问题描述】：

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

 <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();
  }
  });
})

【问题讨论】：

因为你的按钮是动态生成的。使用$(document).on("click",".deleteComments", function() {
还是需要放在ajax回调中
@Nik 不明白。你能详细说明一下吗？
@Nik 不需要，他只需要更改 click 函数以便它处理事件委托。
这能回答你的问题吗？ Event binding on dynamically created elements?

标签： jquery node.js ajax handlebars.js prepend

【解决方案1】：

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

你可以这样解决：

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

【讨论】：

还是需要放在ajax回调中
@Nik 为什么？如果您在文档上设置事件，它适用于动态添加的元素。