live

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

[редактировать]

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

Добавлено в jQuery 1.3: привязывает обработчик к событию (например, click) для всех текущих и будущих элементов набора. Может также связывать пользовательские события.
Возможные события: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
Пока что неподдерживаемые: blur, focus, mouseenter, mouseleave, change, submit

Поведение этого метода очень близко к методу 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>
Name Type