jQueryのremoveClassが効かない

Question

今回jQueryで、モーダルウィンドウをクラスの付与/削除で開閉したいのですが、
クラス付与はできて(モーダル表示はできて)、クラス削除の方がうまくいきません。

      <div class="Works_content_search">
　　　　　<!--.Popupがモダールウィンドウで、最初はdisplay:noneにしてます-->
        <div class="Popup">
          <div class="Popup_wrap">
            <div class="Popup_close"></div>
            <div class="Popup_title">コンテンツ</div>
          </div>
        </div>
      </div>

.Popup{
  display: fixed;
  top:0; 
  bottom:0;
  left:0;　
  right:0
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  z-index: 9;
  align-items: center;
  display: none;
  opacity: 0;
  transition: .5s;
  &.open{
    opacity: 1;
    display: flex;
  }

  let searchBtn = $('.Works_content_search');
  let popup = $('.Works_content_search .Popup');
  let popupClose = $('.Works_content_search .Popup_close');

  searchBtn.click(function(){
      popup.addClass('open');
  });
  popupClose.click(function(){
      popup.removeClass('open');
      console.log('クリック');
  });

console.log('クリック')は発火されるのでクリック自体はできています。
しかし、.openのクラスが消えてくれません。
原因は何でしょう、どういった対処法があるのでしょうか...?
教えていただける嬉しいです。よろしくお願いいたします。

Answer 1

cssのleftの次に全角スペースが入っているのはコピペミスだと思うので、置いておきますが、

手元で試したところ、 console.log('クリック') は確かに実行されていますが、
その直後に Works_content_searchのクリックイベントも実行されています。

これは、 .Works_content_search のdivの中に .Popupのdivが入っているため、
イベントのバブリング（クリックイベントが上位の要素に伝搬する）が起きています。
対処法は簡単で、バブリングを抑制したいイベントハンドラ内の最後で return false; するだけです。

今回であれば以下の変更で修正できると思います。

  popupClose.click(function(){
      popup.removeClass('open');
      console.log('クリック');
      return false;   // この行追加
  });

Comments

[Yariii]

ありがとうございます！
こちらのご提案で解決できました。

Answer 2

  popupClose.click(function(e){
    e.stopPropagation()
    popup.removeClass('open');
    console.log('クリック');
  });