jquery 监听动态创建元素的点击事件答案

【问题标题】：jquery listen to click event on dynamically created elementjquery 监听动态创建元素的点击事件
【发布时间】：2017-08-24 15:32:42
【问题描述】：

我需要为 html 页面创建一个模式。单击页面上的按钮时，会显示模态框。关闭模态的按钮包含在模态本身中。

问题是关闭按钮上的单击事件，这意味着从文档中删除模式 html，不起作用。但是，分配给同一事件的console.log 会显示在控制台中。为什么会发生这种情况以及如何解决？

笔：https://codepen.io/t411tocreate/pen/prZRYN

js代码：

$(document).ready(function(){
  $('#showModal').on('click', function() {
    $('.container').append(modalHtml)
  })

  $(document).on('click','#closeModal',function(){
    console.log('click triggered')
    $(document).remove('#modal')
 })

  var modalHtml = '<div id="modal"> <div class="modal-bg"></div><div class="modal-content"> <p>this is a modal</p><span id="closeModal">close</span> </div></div>'
})

【问题讨论】：

OP 已经在使用委托事件处理程序，这不是问题

标签： javascript jquery event-handling event-delegation

【解决方案1】：

直接在元素上调用remove() - 请改用$('#modal').remove() - 请参见下面的演示：

$(document).ready(function() {
  $('#showModal').on('click', function() {
    $('.container').append(modalHtml)
  })

  $(document).on('click', '#closeModal', function() {
    $('#modal').remove();
  })

  var modalHtml = '<div id="modal"> <div class="modal-bg"></div><div class="modal-content"> <p>this is a modal</p><span id="closeModal">close</span> </div></div>'
})

#showModal {
  margin: 50px 40%;
  font-size: 50px;
}

#modal {
  display: block;
}

#modal .modal-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#modal .modal-bg:before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(43, 43, 43, 0.5);
}

#modal .modal-content {
  width: 50%;
  margin: 20px auto;
  position: relative;
  background: black;
  color: #fff;
  padding: 20px;
}

#modal .modal-content #closeModal {
  padding: 10px;
  margin: 10px;
  border: 1px solid #fff;
}

#modal .modal-content #closeModal:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button id="showModal"> Show modal</button>
</div>

【讨论】：

【解决方案2】：

你正在这样做：

$(document).remove("#modal");

你应该在哪里做这个：

$("#modal").remove();

还请注意，您无需等到 DOM 准备好将处理程序绑定到 document。

$(document).ready(function(){
   var modalHtml = '<div id="modal"> <div class="modal-bg"></div><div class="modal-content"> <p>this is a modal</p><span id="closeModal">close</span> </div></div>'

  $('#showModal').on('click', function() {
    $('.container').append(modalHtml)
  })
})

$(document).on('click', '#closeModal', function(){
    console.log('click triggered')
    $("#modal").remove()
})

【讨论】：

【解决方案3】：

您的问题是由于在remove() 中使用了选择器。这被用作过滤器 - 不是查找元素。要修复逻辑，直接选择元素并在其上调用remove()：

$('#modal').remove();

Updated CodePen

【讨论】：

【解决方案4】：

替换

$(document).remove('#modal');

到

$('#modal').remove();

【讨论】：