javascript - この jQuery コードが機能しないのはなぜですか?

Question

最初の機能だけが機能します。ボタンをもう一度クリックしても何も起こりません。コンソールは常に 1 を出力します。

$('#mobile-menu:not(.active)').click(
  function (e) {
    $('#wrapper').addClass('show-menu');
    $(this).addClass('active');
    $('#sidebar').show();
    e.preventDefault();
    console.log(1);
  }
);
$('#mobile-menu.active').click(
  function (e) {
    $('#wrapper').removeClass('show-menu');
    $(this).removeClass('active');
    $('#sidebar').hide();
    e.preventDefault();
    console.log(2);
  }
);

Answer 1

セレクター$('#mobile-menu.active')はまだ存在しないものを参照しているため、2 番目の関数は実際には何もしません。

次のようにして、必要なものを達成できます。

$('#mobile-menu').click(function(){
  if($(this).hasClass('active')) {
    // Do stuff
  } else {
    // Do other stuff
  }
});