На сегодняшний день метод live поддерживает следуюище события: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.
Не поддерживаемые события метода live: blur, focus, mouseenter, mouseleave, change, submit.
В отличие от функции bind() только единственное событие может быть связано с функцией live().
Метод live схож с методом bind, но с одним важным отличием: когда вы связываете с помощью метода live событие, то происходит связывание с данным событием всех текущих и будущих элементов на странице.
К примеру, если вы связали методом live() событие click со всеми li элементами на странице, а затем добавили другой элемент li, в дальнейшем это событие - click, будет продолжать срабатывать для новых элементов (то есть, нет необходимости применять новую функцию bind или live для новых элементов li).
События, связанные функцией live() не «всплывают» по документу в традиционной манере и не могут быть остановлены применением свойств stopPropagation или stopImmediatePropagation.
К примеру, возьмём два примера с событиями click – первое связано с элементом "li" и второе с элементом "a", вложенным в элемент "li". Если вы кликните по элементу "a" оба события будут инициированы. Это происходит, потому что связывание, например так - $("li").live("click", fn), можно охарактеризовать следующими словами: «Где ни произойдёт событие click, - по элементу li или внутри элемента li, - инициировать данное событие в любом случае. См. последний пример ниже.
Функция live() является подобием популярного [liveQuery] плагина. Однако метод live несколько отличается:
- live (сейчас) поддерживает подмножество событий. Список поддерживаемых событий смотрите выше;
- live не поддерживает свойства no-event, style, callback, которые используются в liveQuery. Только обработчики события могут быть связаны меотодом live;
- live не имеет свойств "setup" или "cleanup", поскольку все события передаются раньше, чем происходит связывание;
Чтобы удалить, связанные функцией live() события, вы должны использовать функцию die()
Пример:
По щелчку на параграфе добавить еще один. Учтите, что функция live() связывает событие click со всеми параграфами – даже с вновь созданными.
"jQuery"
$("p").live("click", function(){
$(this).after("<p>Другой параграф!</p>");
});
"HTML"
<p>Нажим!</p>
<span></span>
"CSS"
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").live("click", function(){
$(this).after("<p>Другой параграф!</p>");
});
});
</script>
</head>
<body class="iframe">
<p>Нажим!</p>
<span></span>
</body>
</html>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
Пример:
Показать текст всех параграфов в диалоговом окне, когда происходит нажатие:
"jQuery"
$("p").live("click", function(){
alert( $(this).text() );
});
Пример:
Отменить действия по умолчанию и предотвратить всплытие событий, вернув false:
"jQuery"
$("a").live("click", function() { return false; })
Пример:
Отменить только дейтсвие по умолчанию, используя метод preventDefault.
"jQuery"
$("a").live("click", function(event){
event.preventDefault();
});
Пример:
В методе live можно связать пользовательское событие.
"jQuery"
$("p").live("myCustomEvent", function(e, myName, myValue){
$(this).text("Привет я пользовательское событие!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent");
});
"HTML"
<p>Пользовательское событие.</p>
<button>Запустить пользовательское событие</button>
<span style="display:none;"></span>
"CSS"
p { color:red; }
span { color:blue; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").live("myCustomEvent", function(e, myName, myValue){
$(this).text("Привет я пользовательское событие!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent");
});
});
</script>
</head>
<body class="iframe">
<p>Пользовательское событие.</p>
<button>Запустить пользовательское событие</button>
<span style="display:none;"></span>
</body>
</html>
<style>
p { color:red; }
span { color:blue; }
</style>
Пример:
Пример в котром происходит срабатывание обработчика собыия click одновременно для родительского и дочернего элементов.
"jQuery"
$(document).ready(function(){
$("li").live("click", function(){
$(this).after("<p>Вы нажали по элементу li!</p>");
});
$("p").live("click", function(){
$(this).after("<p>Вы нажали по элементу \"p\"!</p>");
});
});
"HTML"
<ul>
<li>Один</li>
<li><p>Два</p></li>
<li>Три</li>
</ul>
"CSS"
p { color:red; }
span { color:blue; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).ready(function(){
$("li").live("click", function(){
$(this).after("<p>Вы нажали по элементу li!</p>");
});
$("p").live("click", function(){
$(this).after("<p>Вы нажали по элементу \"p\"!</p>");
});
});
});
</script>
</head>
<body class="iframe">
<ul>
<li>Один</li>
<li><p>Два</p></li>
<li>Три</li>
</ul>
</body>
</html>
<style>
p { color:red; }
span { color:blue; }
</style>
