【jQuery】一度ブラウザリロードしないとクリック処理が動作しない不具合に対応

電脳備忘録

あるサイト(私的)でボタンをクリックしたら画面右からスライドメニューが展開する動作をjQueryで組んでいたのですが、オープンボタンをクリックしても動作しない不具合に気が付きました。
一度ブラウザリロードをすると動くようです。当然ページ遷移した場合は遷移先でリロードする必要があります。これは不具合ですね・・・。

どうやらonclickの書き方に問題があったようで、そこを書き換えたら意図したとおりに動くようになりました。だいぶ前に作ったサイトなのでっちょっと記憶があいまいですが、画像読み込み遅延処理をするプラグインを仕込んだような記憶があるので、おそらくそれが原因のような気がします。

不具合コード

これはうまく動かなかったコード

$('.menu-trigger').on('click',function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
$('.wrapper').removeClass('open');
$('nav').removeClass('open');
$('.overlay').removeClass('open');
} else {
$(this).addClass('active');
$('.wrapper').addClass('open');
$('nav').addClass('open');
$('.overlay').addClass('open');
}
});
$('.overlay').on('click',function(){
if($(this).hasClass('open')){
$(this).removeClass('open');
$('.menu-trigger').removeClass('active');
$('.wrapper').removeClass('open');
$('nav').removeClass('open');
}
});

動作したコード

遅延読み込みをしている場合は $(document)をしてしてあげないとダメみたいですね。

$(document).on('click', '.menu-trigger', function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
$('.wrapper').removeClass('open');
$('nav').removeClass('open');
$('.overlay').removeClass('open');
} else {
$(this).addClass('active');
$('.wrapper').addClass('open');
$('nav').addClass('open');
$('.overlay').addClass('open');
}
});
$(document).on('click', '.overlay', function(){
if($(this).hasClass('open')){
$(this).removeClass('open');
$('.menu-trigger').removeClass('active');
$('.wrapper').removeClass('open');
$('nav').removeClass('open');
}
});

遅延読み込み処理をしてる場合はこの辺りを疑ってみてもいいかも

Newer
Older
Dark
Light
menu