スポンサード リンク
jquery on()メソッド
onメソッドは、セレクタで指定した要素に1つ以上のイベントが呼ばれたときの処理を関連付けます
.bind()、.live()、.delegate()といったイベントAPIをまとめた機能をもったメソッドです
イベント名はclick、dblclick、mousedown、mouseup、mouseover、mouseout、mousemove、mouseenter、mouseleave、blur、focus、load、resize、scroll、unload、change、select、submit、keydown、keypress、keyup、errorで指定します
bind()の機能。要素をイベントすると処理を実行する
$("セレクタ").on("イベント名",function(){処理});
live()の機能。引数は3つ。第二引数のセレクタを第一引数のイベントすると第3引数の処理を実行する
document内のセレクタ全てに働きかけるので負荷が高い
$(document).on("イベント名,"セレクタ",function(){処理});
delegate()の機能。引数は3つ。第二引数のセレクタを第一引数のイベントすると第3引数の処理を実行する
対象セレクタを限定できるため負荷が軽い
$("セレクタ").on("イベント名,"セレクタ",function(){処理});
第3引数のデータをイベントハンドラに渡す
$("セレクタ").on("イベント名,"セレクタ",データ,function(){処理});
指定したHTML要素をクリックしたときにイベントを実行する
セレクタで指定したHTML要素をクリックしたときに他のテキストが変更されます。クリックして下さい
jquery
$(function() { $("#button").on('click',function(){ $("#hoge").text("クリックされました"); }); });css
#hoge{ border: 1px solid; padding: 10px; }
html
<button id="button">ボタン</button> <div id="hoge">テキスト</div>
サンプル
要素を限定してイベントを実行する
セレクタで指定したHTML要素の中のbutton要素に限定してイベントを実行します
delegate()の機能です。動的に追加された要素からでも処理を実行できます
jquery
$(function() { $("#box").on("click","button",function(){ $(this).after("<br><button>出現した要素からもイベント実行できます</button>"); }); });css
#hoge{ border: 1px solid; padding: 10px; }
html
<div id="box"> <button>ボタン</button> </div>
サンプル