如何在jquery中关闭叠加（事件不绑定）？

Question

你能否告诉我如何在jquery中关闭叠加？。实际上，当我点击按钮时，我会显示overlay。在overlay上有close按钮。点击关闭按钮我要关闭叠加？我将如何实现

这是我的代码

https://plnkr.co/edit/DdujoTZJBDdqSwBybGAM?p=preview

代码： -

$(function(){
  $('#btn').click(function(){
    $('body').append($('#overlay').html())
  })
  $('#closeBtn').on('click',function(){
    alert('close');
    $('.overlay').hide();
  })
})

Answer 1

当您尝试绑定 close 事件时，尚未创建关闭按钮。因此，您必须将事件绑定到父元素才能使动态元素的事件起作用：

$('body').on('click','#closeBtn',function(){
    $('.overlay').hide();
})

Demo

甚至可以在show事件中设置关闭事件：

$('body')
      .append($('#overlay').html())
      .find('#closeBtn')
          .on('click',function(){
              $('.overlay').hide();
          })

Demo