работа с replaceWith
Добрый день. уважаемые специалисты, подскажите, почему не работвет следующий пример.
Задача такая. Есть две ссылки, работающие поочередно. Когда кликаешь по одной, она становится некликабельной (происходят какие-то еще действия, но сейчас это неважно), а вторая становится кликабельной. И в обратном порядке также. В моем примере реализовывал с помощью replaceWith. С первой ссылкой работает, а в обратном порядке - нет. Что делаю неправильно? Заранее благодарен. Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js?ver=3.2'></script>
<script>
$(document).ready(function(){
$("#a1").click(function () {
$(this).replaceWith('Ссылка 1');
$("#second").replaceWith('<span id="second"><a href="javascript:void(0);" id="a2">Ссылка 2</a></span');
});
$("#a2").click(function () {
$(this).replaceWith('Ссылка 2');
$("#first").replaceWith('<span id="first"><a href="javascript:void(0);" id="a1">Ссылка 1</a></span>');
});
});
</script>
</head>
<body>
<span id="first"><a href="javascript:void(0);" id="a1">Ссылка 1</a></span>
<span id="second">Ссылка 2</span>
</body>
</html>
|
Вызывая replaceWith, Вы удаляете элемент.
События устанавливаются единоразово на элемент. Т.е. элемент удалили → обработчик события тоже был удалён. Очевидно, что повторная вставка элемента в дерево ничего не изменит, пока кто-нибудь не соизволит повторно назначить обработчик. Но есть и другой подход: навешать обработчик на какой-нибудь элемент из иерархии предков (который не будет удален в ходе манипуляций) и, определяя элемент под курсором (не обязательно тот, к которому привязан обработчик), производить с ним операции. Такой подход не пострадает от вставки / удаления элементов, т.к. обработчик не будет удалён. В jQuery для этого есть jQuery.live. |
Спасибо. А может тут фишка в том, что я манипулирую объектом, который изначально не существовал? Ведь элемент с id="a2" создается динамически уже после загрузки документа.
Кстати, с .live() все работает :) |
Цитата:
$("#a2").click(…)
никакого элемента нет и присоединять обработчик не к чему. |
ага, спасибо.
|
Здравствуйте. Помогите, пожалуйста решить проблему.
Нужно, чтобы при нажатии на кнопку, один блок всегда заменялся другим, и при нажатии на другую кнопку, возвращался первый блок. Код:
$(document).ready(function() {
$("#main").click(function() {
$("div.news-detail").replaceWith(news);
});
var image = $("div#kart").wrap().html();
var anons = $(".news-detail span").wrap().html();
var data = $("#data-detail").wrap().html();
var detail = $(".news-detail").detach();
var news = $(".new");
$("div.center-b div.brown").append(image);
$(".center-b p").append(anons+"...");
$(".center-b .data").append(data);
$("#news").click(function() {
$(".new").replaceWith(detail);
});
});
html:
<div class="new">
<div class="left-b">
<div class="brown"></div>
<div class="data"></div>
<p></p>
<div class="detail"></div>
</div>
<div class="center-b">
<div class="brown"></div>
<div class="data"></div>
Новости
<p></p>
<div class="detail" id="news">Подробно</div>
</div>
<div class="right-b">
<div class="brown"></div>
<div class="data"></div>
<p></p>
<div class="detail"></div>
</div>
</div>
<div class="news-detail">
<h1><span>Заголовок</span></h1>
<div id="kart"><img src="images/vi.jpg"></div>
<p>текст текст текст текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст</p>
<p id="data-detail">07.02.2013</p>
<div class="detail" id="main">Назад</div>
</div>
Один раз это срабатывает, но, вернувшись к блоку .new, второй раз уже нельзя заменить его на .news-detail . А как сделать так, чтобы можно было постояно менять их туда и обратно? И еще вопрос: почему, если я ставлю строки
$("#main").click(function() {
$("div.news-detail").replaceWith(news);
});
в самый низ (то есть, переменные задаются выше этих строк), при нажатии на блок #main ничего не происходит? |
| Часовой пояс GMT +3, время: 13:22. |