delegate(selector, eventType, [eventData], handler)


version 1.4.2 以降

解説

指定されたイベントに、イベントハンドラをバインドします。
セレクタにマッチする要素であれば、後から生成された要素に対しても動的にイベントハンドラをバインドします。

delegate() でバインドしたイベントハンドラを削除するには、undelegate(selector, eventType, [handler]) を呼び出します。

live() との違いは、第1引数に jQueryセレクタ を指定できることです。 内部的では、live() が呼び出されています。

より詳細な解説は、live(eventType, [eventData], handler) を参照してください。

引数

  • selector
    String: jQueryセレクタ
  • eventType
    String: バインドするイベントを表す文字列。
  • [eventData]オプション
    Object: イベントハンドラに渡すデータ。イベントオブジェクトdataプロパティで参照。
  • handler
    Function: バインドするイベントハンドラ関数。この関数には2つの引数が渡されます。
    引数 説明
    event イベントオブジェクト。バインド時に渡されたデータは、dataプロパティで参照。
    triggerData イベント実行時に渡されたデータ。

戻り値

  • jQuery: jQueryオブジェクト

関連


例1:「delegate」ボタンをクリックすると、header をクリックするとテキストを表示、data を hover すると背景色を緑にするイベントハンドラをバインドします。
「行追加」ボタンをクリックして、後から生成された行もセレクタにマッチするため、同じイベントハンドラがバインドされます。
delegate() を使うと簡単に記述できます。

「undelegate」ボタンをクリックすると、後から生成された要素も含め、delegate メソッドで登録されたイベントハンドラをアンバインドします。
undelegate() を使うと簡単に記述できます。

// header をクリックするとテキストを表示、data を hover すると背景色を緑にする。
// delegate() を使うと簡単に記述できます。
$("#delegate").click(function(){
    $("#test_table")
        .delegate("th", "click", function(){ alert($(this).text()); })
        .delegate("td", "hover", function(){ $(this).toggleClass("hover"); });
});

// delegate() でバインドした、header の click イベントと、data の hover イベントを削除。
// undelegate() を使うと簡単に記述できます。
$("#undelegate").click(function(){
    $("#test_table")
        .undelegate("th", "click")
        .undelegate("td", "hover");
});

// 行を追加。追加した行にもイベントがバインドされる。
$("#addRow").click(function(){
    $("#test_table").append("<tr><td>add</td><td>add</td><td>add</td></tr>")
});

header をクリックしたり、data にマウスカーソルを hover してみてください。

例1


header 1header 2header 3
datadatadata
datadatadata
datadatadata