クリエイティブ業界の注目情報や求人情報などを発信する、クリエイターのための総合情報サイトです。
column_general_header02

【jQuery】jQueryで複数のイベントに対応させたい、「load / resize」の両方に対応させたい。解決方法とは

jQueryを使っていて、複数のイベント(アクション)に対応させたい場合、またはjQueryで後から表示したものにも対応させたい場合って、あると思います。

jQueryって便利ですよね。いろいろなアクションができ、さらにプラグインも豊富にあるので、何でもできるような気がしてきます。
jQueryのアクション(イベント)はよく使うものとして、【load】【ready】【scroll】【click】【resize】など、さまざまなものがありますが、同時に使う?複数のイベントをjQueryで表示したものにもイベントを対応させる?という方法もあります。

最近で良くある場面としては、画像が横幅をデバイスいっぱいにするときに、

  • (1)表示された時
  • (2)ウィンドウの幅を変えた時の2つに対応させたい場合などに使います。

普段のjQueryの使い方は、

    $(document).ready(function(){
    }
    

こんな感じだと思いますが、同時に複数のイベントを適用したり、jQueryで表示したものに適用させるには、

   $('#idまたは.class').on("click resize", function(){
   }
   //または
   $(window).on('load resize','#idまたは.class',function(){
   }
  

このように記述すれば、複数のイベントを適用したり、jQueryで後から表示したものにも適用できます。

author

narumasa(なるまさ)

http://narumasa.com


フリーランスのWebクリエイターとして2001年から活動。
レコーディング・エンジニアとして職歴をスタートし、Webの勉強をすべくスクールに通い、デザイン会社のWebデザイナーへ。2001年に退職後、フリーランスのWebクリエイターとして活動しつつ、商品企画会社に入社し、企画プロデューサー・取締役を経て、再びフリーランスに。
現在はフリーランスのWebクリエイターとして数々の大企業のホームページから街の商店のホームページまで、1人で企画からディレクション、デザイン、コーディング、プログラミングまで全てを担当している。

関連記事