javascript - 按钮单击事件在 Jquery 中不起作用

Question

我使用模态查询将 div 附加到正文，并且按钮与模态关联。我正在尝试使用按钮关闭模式，我的代码如下。看起来像是事件触发的问题。

 $('a.launch-youtube-modal').click(function(event) {
      event.preventDefault();
      $('body').append([
        '<div class="youtube-modal">',
          '<div class="youtube-modal-container"><div class="youtube-modal-video-container">',
         '<iframe width="671" height="495" src="'+ $(this).attr('href') +'" frameborder="0" allowfullscreen id="youtube-video"></iframe>',
         '<button class="ss-icon ss-gizmo youtube-close">close</button>',
          '</div></div>',
        '</div>'
      ].join(''));

 function closeYoutubeModal() {
        if (!video) return;
        video.jQYT('destroy');
        $('.youtube-modal').remove();
      }
      $('.youtube-modal .youtube-close').click(function () {
         closeYoutubeModal();    
      });
    });

Answer 1

试试这个:使用 .on 为动态创建的元素绑定(bind)点击事件处理程序。您可以将关闭按钮点击处理程序保留在模式点击处理程序之外

$('a.launch-youtube-modal').click(function(event) {
      event.preventDefault();
      $('body').append([
        '<div class="youtube-modal">',
          '<div class="youtube-modal-container"><div class="youtube-modal-video-container">',
         '<iframe width="671" height="495" src="'+ $(this).attr('href') +'" frameborder="0" allowfullscreen id="youtube-video"></iframe>',
         '<button class="ss-icon ss-gizmo youtube-close">close</button>',
          '</div></div>',
        '</div>'
      ].join(''));

 });

function closeYoutubeModal() {
   if (!video) return;
   video.jQYT('destroy');
   $('.youtube-modal').remove();
}
$(document).on('click','.youtube-modal .youtube-close',function () {
    closeYoutubeModal();    
});