javascript - 无法关闭弹出窗口

Question

点击 class=".team-single" 会打开带有 class=.team-popup 的弹出窗口单击 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-->

请帮帮我

Answer 1

在 javascript 中，所有事件(嗯，几乎)“冒泡”到父元素。

在您的示例代码中，“点击”事件到达了“.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();
  });
});