Пример:
Пример разъясняющий различия методов live и delegate, изменив с deleagte на live всплытие собтия не будет предотвращено, а с delegate данная особенность устранена:
"jQuery"
$("table").delegate('td', "click", function(e){ $(this).toggle('slow'); }); //$('div').live('click', function(e){ $('div').delegate('div','click', function(e){ e.stopPropagation(); alert(1) });
"HTML"
<table> <tr><td><div></div> <tr><td> </table>
"CSS"
table td{
height:200px;
width:200px;
background:red;
}
table td div{
height:150px;
width:150px;
background:green;
}
"Живой пример 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(){
$("table").delegate('td', "click", function(e){
$(this).toggle('slow');
});
//$('div').live('click', function(e){
$('div').delegate('div','click', function(e){
e.stopPropagation();
alert(1)
});
});
</script>
</head>
<body class="iframe">
<table>
<tr><td><div></div>
<tr><td>
</table>
</body>
</html>
<style>
table td{
height:200px;
width:200px;
background:red;
}
table td div{
height:150px;
width:150px;
background:green;
}
</style>
Пример:
Отображение текста каждого параграфа в диалоговом окне один раз по событию onclick:
"jQuery"
$("body").delegate("p", "click", function(){
$(this).after("Дополнительный параграфh!
");
});
"HTML"
Click me!
"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(){
$("body").delegate("p", "click", function(){
$(this).after("Дополнительный параграфh!
");
});
});
</script>
</head>
<body class="iframe">
Click me!
</body>
</html>
<style>
p {
background:yellow;
font-weight:bold; cursor:pointer;
padding:5px;
}
p.over { background: #ccc; }
span { color:red; }
</style>
Пример:
Добавление параграфов при нажатии как по существующему, так и по новому параграфу
"jQuery"
$("body").delegate("p", "click", function(){
$(this).after("Дополнительный параграф!
");
});
"HTML"
Нажми!
"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(){
$("body").delegate("p", "click", function(){
$(this).after("Дополнительный параграф!
");
});
});
</script>
</head>
<body class="iframe">
Нажми!
</body>
</html>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
Пример:
Добевление текста в параграф, при нажатии по нему:
Пример:
Предотвращение всплытие и действия браузера по умолчанию:
Пример:
Для отмены выполнения текущего действия браузера используется метод "preventDefault", в нашм примере переход по ссылке не произойдёт:
Пример:
Добавлять пользовательское событие так же допускается, в этом случае пользовательским событием является "myCustomEvent":
"jQuery"
$("body").delegate("p", "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"
Создаём пользовательское событие
<button>Запустить пользовательское событие</button> <span style="display:none;"></span>
"Живой пример 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(){
$("body").delegate("p", "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">
Создаём пользовательское событие
<button>Запустить пользовательское событие</button>
<span style="display:none;"></span>
</body>
</html>