Пример:
По щелчку на параграфе добавить еще один. Учтите, что функция 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>