js STUDIO

.live() 非推奨 1.9 削除

マッチした要素に任意のイベントをバインドします。また、対象となるエレメントは現在マッチしているものも含め、将来的にマッチするものも対象となります。

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

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

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

.live( eventType, handler(eventObject) ) 1.3追加

戻り値:jQuery

マッチした要素に任意のイベントをバインドします。また、対象となるエレメントは現在マッチしているものも含め、将来的にマッチするものも対象となります。

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

.live( eventType, eventData, handler(eventObject) ) 1.4追加

戻り値:jQuery

マッチした要素に任意のイベントをバインドします。また、対象となるエレメントは現在マッチしているものも含め、将来的にマッチするものも対象となります。

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

.live( events ) 1.4.3追加

戻り値:jQuery

マッチした要素に任意のイベントをバインドします。また、対象となるエレメントは現在マッチしているものも含め、将来的にマッチするものも対象となります。

引数 説明
events マップ値でイベント名と関数をして、それぞれのイベント発生時に実行したい処理を指定します。

サンプル 

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

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

//全A要素のクリックイベントのイベント伝搬のみをキャンセルします。
$("body").live("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="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<p>クリックしてください!</p>
<span></span>
<script>
  $("p").live("click", function(){
    $(this).after("<p>新しく生成されたこちらのP要素もクリックしてください!</p>");
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:red; }
  span { color:blue; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>
$("p").live("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