無法關閉彈出式

與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

無法關閉彈出式

回答

相關問題