无法关闭弹出式

与class=.team-popup一个弹出上的class=".team-single" 我无法关闭弹出上的class=.close-btn无法关闭弹出式

点击点击打开以下是JS和HTML代码

jQuery(document).ready(function() { 
 

 
    jQuery(".team-single").click(function() { 
 
    jQuery(".team-popup").show(); 
 
    }); 
 

 
    jQuery(".close-btn").click(function() { 
 
    jQuery(".team-popup").hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="team-single"> 
 
    <div class="team-popup"> 
 
    <div class="popup-box"> 
 
     <div class="col-sm-8 col-xs-7 right-side"> 
 

 
     </div> 
 
     <span class="close-btn">x close</span> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- single team ends-->

请帮我

来源

2015-05-12 user3848698

该代码看起来很好，为什么这不工作？ – Halcyon

弹出是由异步操作添加的还是在文档就绪触发后的任何时候添加的？ –

当您单击“.close-btn”单击泡泡到“.team-single”时，您应该防止事件冒泡。使用event.stopPropagation（） –

我所有的事件（好吧，几乎）所有事件“泡”出来给父母的元素。

在你的示例代码中，“click”事件达到了这个冒泡的“.team-single”有界的函数原因。

您应该通过使用事件对象的stopPropagation函数来防止冒泡。

jQuery(document).ready(function() { 

    jQuery(".team-single").click(function(e) { 
    jQuery(".team-popup").show(); 
    }); 

    jQuery(".close-btn").click(function(e) { 
    jQuery(".team-popup").hide(); 
    e.stopPropagation(); 
    }); 
});

来源

2015-05-12 16:27:49

非常感谢你很棒 – user3848698

正如你可以看到评论你的html结构应该修改。这里是一个例子

<html> 
<body> 

<div class="team-single"> 
    <div class="open-popup">open</div> 
    <div class="team-popup" style="display:none"> 
     <div class="popup-box"> 
      <div class="col-sm-8 col-xs-7 right-side"> 
       text inside your popup 
      </div> 
      <span class="close-btn">x close</span> 
     </div> 
    </div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 

jQuery(document).ready(function() { 

    jQuery(".open-popup").click(function(){ 
     jQuery(".team-popup").show(); 
    }); 

    jQuery(".close-btn").click(function(){ 
     jQuery(".team-popup").hide(); 
    }); 
}); 
</script> 
</body> 
</html>

来源

2015-05-12 16:28:58 Antonio

尽管这确实有效，但它并没有阐明为什么OP代码不起作用。 –

我想上面的解释是相当准确的。我的解释是，这两个听众被连接到一个公共区域，这就是为什么创建一个循环，并停止传播需要 – Antonio

实际上，我会说，@ crisim-il-numenoreano答案是一个黑客攻击，并一直使用黑客我可以说不是一个好的解决方案 – Antonio

无法关闭弹出式

回答

相关问题