live

« Обратно к странице событий

live( тип, функция )

Добавлено в jQuery 1.3: привязывает обработчик к событию (например, click) для всех текущих и будущих элементов набора. Может также связывать пользовательские события.
Возможные события: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyupПока что неподдерживаемые: blur, focus, mouseenter, mouseleave, change, submit[adsense]Поведение этого метода очень близко к методу bind, но с некоторыми отличиями:
  • Когда Вы привязываете "живое" событие, оно будет привязано ко всем текущим и будущим элементам на странице (используя делегирование событий). Например, если Вы привязали "живой клик" ко всем элементам "li" на странице, а затем позже добавили еще один элемент "li", то привязанное ранее "живое" событие будет работать и для только что добавленного элемента (в отличие от bind, где события должны привязываться заново ко всем новым элементам).
  • "Живые" события не передаются между элементами обычным образом, поэтому такая передача не может быть остановлена функциями stopPropagation или stopImmediatePropagation. Например, возьмем случай с двумя событиями click: одно привязываем к элементу "li", другое -- к "li a". Если клик был сделан по внутренней ссылке, то ОБА события будут вызваны. Это происходит потому, что по сути $("li").bind("click", fn); означает: "Всегда, когда осуществляется клик по элементу LI или внутри элемента LI -- запускать событие". Для остановки дальнейшей обработки "живого" события функция fn должна вернуть false.
  • "Живые" события пока работают только при использовании в отношении селектора. Например, такая конструкция будет работать: $("li a").live(...), а такие не будут: $("a", someElement).live(...) или $("a").parent().live(...).
.live() ведет себя подобно популярному дополнению liveQuery,  но с несколькими отличиями:
  • .live в данный момент поддерживает все множество событий.
  • .live не поддерживает "без события" стиль вызова функции, который предоставляет liveQuery. Только обработчики событий могут привязываться с помощью .live.
  • .live не имеет стадии "настройки" или "очистки" так как все события делегируются, а не привязываются непосредственно к элементам.
Для удаления всех "живых" событий используйте метод die.
Аргументы:
типСтрока
Тип события
функцияФункция
Функция
function callback(eventObject) {
  this; // dom element
}
Примеры:
Нажмите на параграфе, чтобы добавить еще один. Обратите внимание, событие по нажатию привязывается и ко всем новым параграфам.
    $("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>
Отображение содержимого параграфа в сообщении alert при нажатии:
$("p").live("click", function(){
  alert( $(this).text() );
});
Для отмены действия по умолчанию и предотвращения передачи событий необходимо возвратить false:
$("a").live("click", function() { return false; })
Для отмены только действия по умолчанию необходимо использовать метод preventDefault.
$("a").live("click", function(event){
  event.preventDefault();
});
Пример связывания пользовательских событий.
    $("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