on()

このエントリーをはてなブックマークに追加

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

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

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

sample

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

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

sample

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

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

sample

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

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

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

sample

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

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

sample

jQuery 1.7.0での追加/変更

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

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

同じカテゴリー(Events)のエントリー

検索

スポンサードリンク

バージョン

リファレンス