[jQuery]$(window).on(‘load’)が発火しないときの対策方法

不思議。

こんなことがあった
修正方法

こんなことがあった

$(function(){
    $(window).on('load resize', function(){
        if(window.matchMedia('(max-width:767.98px)').matches){
            $('header').addClass('sp');
        }else{
            $('header').removeClass('sp');
        }
    })
})

ブラウザ幅によってclass付与をしたいのだけど、読込み時に動作しない。resizeは動くんだけどloadは駄目っていうことがあった。

修正方法

まずライブラリの確認。

jQuery3だったらライブラリのせい。動かないのは仕様なので、組み方を変える必要がある。

で、こうする。

$(window).on('load resize', function(){
    if(window.matchMedia('(max-width:767.98px)').matches){
        $('header').addClass('sp');
    }else{
        $('header').removeClass('sp');
    }
})
$(function(){
    ︙
})

無名関数の外に逃がすと動く。

jQueryを触ってると無名関数につっこむ癖が身につくのだけど、それを止めましょうっていうこと。

loadを動かすなら、って話なんで、loadじゃなかったら$(functions(){…})に突っ込んでも問題ないです。