NARUMASA CREATIVE DESIGN
Copyright © narumasa.com
All rights reserved.
09
3月
2019

【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で後から表示したものにも適用できます。

【jQuery】背景画像 全画面表示:自作版
Chromeで簡単にキャッシュクリア+スーパーリロードをする方法