undelegate(selector, eventType, [handler])


version 1.4.2 以降

解説

delegate(selector, eventType, [eventData], handler) でバインドしたイベントハンドラを削除します。

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

引数の形が2種類あります。

type1

引数なしで呼び出した場合は、delegate(selector, eventType, [eventData], handler) でバインドした全てのイベントハンドラが削除されます。

戻り値

  • jQuery: jQueryオブジェクト
type2

selector にマッチする、指定した eventType に delegate(selector, eventType, [eventData], handler) でバインドしたイベントハンドラが削除されます。
handler を指定した場合は、そのイベントハンドラのみ削除されます。

引数

  • selector
    String: jQueryセレクタ
  • eventTypeオプション
    String: バインドされているイベントを表す文字列。
  • [handler]オプション
    Function: バインドされているイベントハンドラ関数。

戻り値

  • 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