【jQuery】.on() の使い方（jQuery1.7～）

Tweet

Category JavaScript / Tagged jQuery 2012/02/25

jQuery1.7から、.bind()、.live()、.delegate()などは非推奨となり、.on() が推奨となりました。今後すべてのイベントは .on() で、となっていきそうですが、なにやら引数が多くて分かりにくい感じ？では使ってみましょう。

１、$(セレクタ).on(イベント, 関数)

セレクタにマッチした要素で、イベントが発生すると、関数が実行されます。

= .bind() ですね。

「セレクタにマッチした要素に」なので、そこにある要素に対してとなり、後から動的に追加した要素に対しては効きません。

example

$('#example-button').on('click', function(){alert('clicked!');});

Demo デモ – $(セレクタ).on(イベント, 関数)

２、$(document).on(イベント, セレクタ, 関数)

documentで、イベントが発生すると、イベントが発生したのがセレクタにマッチする要素のとき、イベントハンドラが実行されます。

= .live() ですね。

これは、後から動的に追加した要素に対しても効きます。

example

$(document).on('click', '#example-button', function(){alert('clicked!');});

３、$(セレクタ1).on(イベント, セレクタ2, 関数)

セレクタ1で指定した要素で、イベントが発生すると、イベントが発生したのがセレクタ2にマッチする要素のとき、イベントハンドラが実行されます。

= .delegate() ですね。

これも、後から動的に追加した要素に対しても効きます。

example

$('#example-form').on('click', '#example-button', function(){alert('clicked!');});

Demo デモ – $(セレクタ).on(イベント, セレクタ, 関数)

２と３は一緒のことじゃないかと思ったなら、そのとおりで、.on()に集約されてよかったですね、ということです。