jquery delegateメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery delegate()メソッド

delegateメソッドは、セレクタで指定した要素が動的に追加された場合にも実行できるメソッドです
取得するセレクタを指定されたセレクタに限定できるため処理が速いです
第一引数にイベントを""で囲みます
第二引数にハンドラに渡すデータを設定できますが、省略もできます
第三引数にハンドラを記述します
functionの手前にカンマを入れます
イベント名はclick、dblclick、mousedown、mouseup、mouseover、mouseout、mousemove、keydown、keypress、keyupで指定します。jQueryのバージョンアップで他のイベントも使えるようになる可能性あり

$("セレクタ").delegate("イベント名",function(){
	イベントの処理
});

ハンドラにデータを渡す場合

$("セレクタ").delegate("イベント名",data,function(){
	イベントの処理
});

HTML要素を動的に追加された場合にも実行できます

通常ならHTMLに最初から存在している要素のみイベントを実行できますが。delegateメソッドをつかえば新しく出現した要素でもイベントを実行できます

jquery

$(function() {
    $("#box").delegate("button","click",function(){
    $(this).after("<br><button>出現した要素からもイベント実行できます</button>");
    });
});

html

<div id="box">
<button>クリックで追加</button>
</div>

実行後









(C)2012 ホームページ作成無料