jQuery API の on( events, selector, data, fn ) は、マッチした要素の子孫要素のうち、「selector」にマッチした要素のイベント「events」時に、イベントハンドラ「fn」をバインドするメソッド。その際、イベントハンドラにイベントデータ「data」を渡すことができる。
記述方法
jQuery( セレクター１ ) . on( イベント, セレクター２, イベントデータ, イベンドハンドラ );
「セレクター１」の子孫要素のうち「セレクター２」にマッチした要素の「イベント」に、「イベンドハンドラ」をバインド。その際、イベントハンドラに「イベントデータ」を渡す。
「イベント」は、半角スペース区切りで複数指定できる。
引数
- events / イベント
イベンドハンドラをバインドしたいイベントを指定する。
例えば、クリックイベントであれば「click」、マウスオーバーイベントであれば「mouseover」を指定。
半角スペースで区切ることで、複数のイベントを指定できる。
- data / イベントデータ
イベントハンドラに渡すデータ。
イベントデータは、event.dataプロパティに格納される。
- selector / セレクター
イベンドハンドラをバインドしたい要素を指定する。
- fn / イベンドハンドラ
イベンドにバインドしたいイベンドハンドラを指定する。
実装例（サンプル）
- このリストに追加
実装例（サンプル）の動作について
「項目追加」ボタンのクリックイベント、マウスオーバーイベント、マウスアウトイベントが発生すると、ボタンの下のリストに項目を追加する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
var count = 1;
jQuery( "#sample" ).on( "click mouseover mouseout", "button", { itemName : "追加項目" }, function( event ) {
jQuery( "#sample-ol" ).append( "<li>" + event.data.itemName + count++ + "</li>" );
} );
} );
// -->
</script>
<!--
jQuery( function() {
var count = 1;
jQuery( "#sample" ).on( "click mouseover mouseout", "button", { itemName : "追加項目" }, function( event ) {
jQuery( "#sample-ol" ).append( "<li>" + event.data.itemName + count++ + "</li>" );
} );
} );
// -->
</script>
HTML
<div id="sample">
<button>項目追加</button>
<ol id="sample-ol">
<li>このリストに追加</li>
</ol>
</div>
<button>項目追加</button>
<ol id="sample-ol">
<li>このリストに追加</li>
</ol>
</div>