jquery - 自定义弹出框不关闭

Question

我在这个网站上做了一个自定义弹出框http://dutchinnovators.nl/dev/

通过单击一个六边形，一个隐藏的 div 结构被复制并添加到#page，然后淡入。这一切都很好。但是，.bedrijf-popup 不想关闭

似乎无法识别 Click 操作或其他问题，我已经尝试修复它一段时间并搜索了论坛，但没有成功。

如能帮助关闭此弹出窗口，我们将不胜感激!

HTML

<div class="bedrijf-popup">
    <div class="popup_black-bg"></div>
        <div class="popup_container">
            <div class="popup-close"></div>
            <content divs>                  
        </div>
    </div>
</div>

jQuery

  jQuery('.popup-close').each(function() {
    jQuery(this).bind('click', function(){    
      jQuery('#page > .bedrijf-popup .popup_black-bg').animate({'opacity': 0}, 500);
      jQuery('#page > .bedrijf-popup .popup_container').delay(500).animate({'opacity': 0}, 500);
      jQuery('#page > .bedrijf-popup').remove();
    });
 });

Answer 1

问题是，在您尝试绑定(bind)点击处理程序的那一刻，没有 .popup-close在 DOM 中，因为仅在单击六边形后才创建包含它的整个元素。 Bind 虽然不会监听 DOM 中的后续更改。

因此，您要做的是将关闭点击处理程序的绑定(bind)从 jQuery(document).ready() 移动到创建 <div class="bedrijf-popup"> 的方法。 , 之后它被添加到 DOM 中。

如果您在控制台中调用点击处理程序，这也是为什么您的点击处理程序可以正常工作的原因 - 显然，您是在弹出窗口已经存在的设置中执行此操作。

来自jQuery documentation :

Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().