Question

上制作了一个自定义弹出框

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

似乎无法识别点击操作或其他内容，我已经尝试修复它一段时间并搜索论坛，但没有运气。

任何帮助关闭此弹出窗口都将不胜感激！

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

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

所以你要做的就是将你的结束点击处理程序的绑定从jQuery（document）.ready（）移动到创建你的<div class="bedrijf-popup">的方法，之后添加到DOM。

这就是为什么你的点击处理程序在控制台中调用它的原因 - 显然你在弹出窗口已经存在的设置中这样做了。

来自jQuery documentation：

处理程序附加到jQuery中当前选定的元素对象，所以那些元素必须存在于调用.bind（）的位置发生。有关更灵活的事件绑定，请参阅事件讨论代理人.on()或.delegate()。

Answer 2

尝试替代

 jQuery(document).bind("click", ".popup-close", 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();
 });

或者

 jQuery(document).bind("click", ".popup-close", function() {  
      jQuery(this).parents('.bedrijf-popup').find('.popup_black-bg').animate({'opacity': 0}, 500);
      jQuery(this).parents('.bedrijf-popup').find('.popup_container').delay(500).animate({'opacity': 0}, 500);
      jQuery(this).parents('.bedrijf-popup').remove();
 });

由于你使用的是jQuery 1.7.1，你可以使用'on'而不是'bind'

自定义弹出框不会关闭

2 个答案: