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

Question

我需要为 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>'
})

Answer 1

您的问题是由于使用了 select 或 remove()。这用作过滤器 - 而不是查找元素。要直接修复逻辑 select 元素并对其调用 remove()：

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

Updated CodePen

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

Answer 3

直接在元素上调用 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>

Answer 4

替换

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

至

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

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

jquery listen to click event on dynamically created element

javascript

jquery

event-handling

event-delegation