最近、jQueryでブラウザの現在のウィンドウ幅を取得して処理を行うプログラムを書く機会がありました。まだjQueryに慣れていない私ですが、調べてみると「resize」というイベントを使うことで実現できそうだとわかりました。

$(window).resize(function() {
    // 処理....
});

でも、実際に書いてみると動いてくれません。なぜ・・と、さらに調べると、onメソッドとあわせて使う書き方を見つけました。実際に書いてみると、

$(window).on('resize', function () {
    // 処理....
}

これでちゃんと動きました。そう言えば前やってたプロジェクトでも同じようなところで詰まったことを思い出しました。動的に生成した要素に対してイベント適用する場合には、onメソッドを使わないと動かないとか。今回のウィンドウ幅取得もこれに関係しているのでしょうか。備忘録の意味も含め前やった所も書いておきます。

○クリックされた時に発生するイベント

$(document).on("click", function(){
    // 処理....
}

○キー押下されたあと上がった時に発生するイベント

$(document).on('keyup', function(){
    // 処理....
}

○セレクト等、指定要素の値が変更された際に発生するイベント

$("#QuestionItem").on('change',function(){
    // 処理....
}

onメソッドを使うと、何かと解決されスッキリすることが多いです。しっかり勉強して、onメソッドを使いこなせるようになりたいと思います。