Пример:
По щелчку на параграфе добавить еще один. Учтите, что функция live() связывает событие click со всеми параграфами – даже с вновь созданными.
"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://slyweb.ru/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>
Пример:
Показать текст всех параграфов в диалоговом окне, когда происходит нажатие:
Пример:
Отменить действия по умолчанию и предотвратить всплытие событий, вернув false:
Пример:
Отменить только дейтсвие по умолчанию, используя метод 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://slyweb.ru/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://slyweb.ru/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>
