ドキュメント

Events/live

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

live( type, fn )

Added in jQuery 1.3: Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.
Possible event values: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
Currently not supported: blur, focus, mouseenter, mouseleave, change, submit

Unlike .bind(), only a single event can be bound in each call to the .live() method.

This method works and behaves very similarly to jQuery's bind method but with a few important distinctions:

  • When you bind a "live" event it will bind to all current and future elements on the page (using event delegation). For example if you bound a live click to all "li" elements on the page then added another li at a later time - that click event would continue to work for the new element (this is not the case with bind which must be re-bound on all new elements).
  • Live events do not bubble in the traditional manner and cannot be stopped using stopPropagation or stopImmediatePropagation. For example, take the case of two click events - one bound to "li" and another "li a". Should a click occur on the inner anchor BOTH events will be triggered. This is because when a $("li").bind("click", fn); is bound you're actually saying "Whenever a click event occurs on an LI element - or inside an LI element - trigger this click event." To stop further processing for a live event, fn must return false. This also means, that if any of the parent nodes for the "li" has a click event handler that returns false, the click event will never reach the document node, and as a consequence the live event will never be triggered.
  • Live events currently only work when used against a selector. For example, this would work: $("li a").live(...) but this would not: $("a", someElement).live(...) and neither would this: $("a").parent().live(...).

.live() behaves similarly to the popular liveQuery plugin but with a few major differences:

  • .live (currently) supports a subset of all events. Note the full list of supported/not-supported events above.
  • .live doesn't support the no-event style callback that liveQuery provides. Only event handlers can be bound with .live.
  • .live doesn't have a "setup" or "cleanup" step, since all events are delegated rather than bound directly to an element.

To remove a live event you should use the die method.

Arguments:
typeString
An event type
fnFunction
A function to bind to the event on each of the set of matched elements
function callback(eventObject) {
  this; // dom element
}
Examples:

Click a paragraph to add another. Note that live binds the click event to all paragraphs - even new ones.

    $("p").live("click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("p").live("click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });

  });
  </script>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
</head>
<body>
  <p>Click me!</p>
  <span></span>
</body>
</html>

To display each paragraph's text in an alert box whenever it is clicked:

$("p").live("click", function(){
  alert( $(this).text() );
});

To cancel a default action and prevent it from bubbling up, return false:

$("a").live("click", function() { return false; })

To cancel only the default action by using the preventDefault method.

$("a").live("click", function(event){
  event.preventDefault();
});

Can bind custom events too.

    $("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");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("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>
  <style>
  p { color:red; }
  span { color:blue; }
  </style>
</head>
<body>
  <p>Has an attached custom event.</p>
  <button>Trigger custom event</button>
  <span style="display:none;"></span>
</body>
</html>

NameType