js STUDIO

.delegate()

ルート要素を元にセレクターで指定されたエレメントを特定し、マッチしたエレメントに任意のイベントを設定します。

バージョン1.7で登場した.on()メソッドによって、これ移行のバージョンでは.delegate()メソッドは不要となります。 .delegate()は、jQuery1.7より前のバージョンでのみ使用するのが良いでしょう。 

// jQuery 1.4.3+
$(elements).delegate(selector, events, data, handler);
// jQuery 1.7+
$(elements).on(events, selector, data, handler);

.live()メソッドはイベント伝搬をキャンセルすることは出来ませんが、 .delegate()メソッドは「event.stopPropagation() 」かfalseを返すことで イベント伝搬をキャンセルすることが出来ます。(?)

.delegate( selector, eventType, handler(eventObject) ) 1.4.2追加

戻り値:jQuery

ルート要素を元にセレクターで指定されたエレメントを特定し、マッチしたエレメントに任意のイベントを設定します。

引数 説明
selector イベントを発生させる要素をフィルタリングするセレクタを指定します。
eventType "click"や"submit"などのDOMイベント名、任意に定義したカスタムイベント名の文字列を指定します。
また、スペース区切りで複数のイベントを指定することも可能です。
handler(eventObject) 対象のイベントが発生した際に、実行したい処理を関数として指定します。 
$("table").delegate("td", "click", function() {
  //Table内のTDがクリックされた際に、TDの"chosen"クラスを切り替えます。
  $(this).toggleClass("chosen");
});
.on()メソッドを使って同じ処理を次のように書くことが出来ます。 
$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});

.delegate( selector, eventType, eventData, handler(eventObject) ) 1.4.2追加

戻り値:jQuery

ルート要素を元にセレクターで指定されたエレメントを特定し、マッチしたエレメントに任意のイベントを設定します。

引数 説明
selector イベントを発生させる要素をフィルタリングするセレクタを指定します。
eventType "click"や"submit"などのDOMイベント名、任意に定義したカスタムイベント名の文字列を指定します。
また、スペース区切りで複数のイベントを指定することも可能です。
[eventData] マップ値を指定することで、データをイベントハンドラーに渡すことが出来ます。
preventBubble 初期値はtrue。この3番目の引数にfalseを設定すると、本来実行されるDOMイベントが実行されなくなり、 またイベントの伝搬もブロックされます。

.delegate( selector, events ) 1.4.3追加

戻り値:jQuery

ルート要素を元にセレクターで指定されたエレメントを特定し、マッチしたエレメントに任意のイベントを設定します。

引数 説明
selector イベントを発生させる要素をフィルタリングするセレクタを指定します。
events マップ値でイベント名と関数をして、それぞれのイベント発生時に実行したい処理を指定します。

サンプル 

//全P要素をクリックすると、そのテキスト内容をアラート表示します。
$("body").delegate("p", "click", function(){
  alert( $(this).text() );
});

//全A要素のクリックイベントとそのイベント伝播をキャンセルします。
$("body").delegate("a", "click", function() { return false; });

//全A要素のクリックイベントのイベント伝搬のみをキャンセルします。
$("body").delegate("a", "click", function(event){
  event.preventDefault();
});

デモ

P要素にクリック時のイベントハンドラを登録しています。 また、.bind()とは違い新しく生成されたP要素にもクリックイベントハンドラが登録されます。 

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:2px; margin:5px; font-size:10px;}
  p.over { background: #ccc; }
  span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>クリックしてください!</p>
<span></span>
<script>
  $("body").delegate("p", "click", function(){
    $(this).after("<p>新しく生成されたこちらのP要素もクリックしてください!</p>");
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:red; }
  span { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>
$("body").delegate("p", "myCustomEvent", function(e, myName, myValue){
  $(this).text("Hi there!");
  $("span").stop().css("opacity", 1)
           .text("myName = " + myName)
           .fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
  $("p").trigger("myCustomEvent");
});
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM