on()

onはイベントをバインドするためのメソッドです。

例えばclickイベントをバインドする場合には次のように第１引数にイベント名を第２引数にコールバック関数を指定します。

$("button").on("click",function(){
	alert("on!");
});

セレクターでコンテキストを指定し、第２引数にはイベントを設定する要素が指定可能です。

$("p").on("click","button",function(){
	alert("on!");
});

セレクターに対してdocumentを指定することでも可能です。

$(document).on("click","button",function(){
	alert("on!");
});

jQuery Mobileなどdom ready後にもAjaxでHTML構造が変化する場合は$(document)をセレクターに指定するとよいでしょう。

また、コールバック関数の前にはイベントデータを指定可能です。設定したイベントデータはコールバック関数内のイベントオブジェクトのdataプロパティのオブジェクトとして取り出すことができます。

$("p").on("click","button",{bar:"foo!"},function(e){
	alert(e.data.bar);//foo!とアラートが出る。
});

onメソッドはオブジェクトとして複数のイベントを同時に指定すること可能です。

$("button").on({
	mouseover : function(){
		$(this).next().text("mouseover");
	},
	mouseout : function(){
		$(this).next().text("mouseout");
	},
});

on()メソッドはjQuery 1.7.0で追加されたメソッドです

登録日 : 2012年12月02日最終更新日 : 2012年12月2日

jQuery リファレンス