SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

【jQuery】.on() の使い方(jQuery1.7~)

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

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

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

= .bind() ですね。

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

example

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

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

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

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

= .live() ですね。

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

example

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

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

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

= .delegate() ですね。

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

example

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

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

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

関連するメモ

コメント