Форум

egreek · #1 (**permalink**) 22.08.2011, 16:20

Добрый день. уважаемые специалисты, подскажите, почему не работвет следующий пример.
Задача такая. Есть две ссылки, работающие поочередно. Когда кликаешь
по одной, она становится некликабельной (происходят какие-то еще действия, но сейчас это неважно), а вторая становится кликабельной. И в обратном порядке также. В моем примере реализовывал с помощью 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>

B@rmaley.e><e · #2 (**permalink**) 22.08.2011, 16:31

Вызывая replaceWith, Вы удаляете элемент.
События устанавливаются единоразово на элемент.
Т.е. элемент удалили → обработчик события тоже был удалён. Очевидно, что повторная вставка элемента в дерево ничего не изменит, пока кто-нибудь не соизволит повторно назначить обработчик.

Но есть и другой подход: навешать обработчик на какой-нибудь элемент из иерархии предков (который не будет удален в ходе манипуляций) и, определяя элемент под курсором (не обязательно тот, к которому привязан обработчик), производить с ним операции. Такой подход не пострадает от вставки / удаления элементов, т.к. обработчик не будет удалён.
В jQuery для этого есть jQuery.live.

egreek · #3 (**permalink**) 22.08.2011, 16:37

Спасибо. А может тут фишка в том, что я манипулирую объектом, который изначально не существовал? Ведь элемент с id="a2" создается динамически уже после загрузки документа.
Кстати, с .live() все работает

B@rmaley.e><e · #4 (**permalink**) 22.08.2011, 16:44

Сообщение от egreek

А может тут фишка в том, что я манипулирую объектом, который изначально не существовал? Ведь элемент с id="a2" создается динамически уже после загрузки документа.

И это тоже немаловажно. Потому что в момент выполнения

$("#a2").click(…)

никакого элемента нет и присоединять обработчик не к чему.

egreek · #5 (**permalink**) 22.08.2011, 17:11

ага, спасибо.

lololo · #6 (**permalink**) 14.02.2013, 18:18

Здравствуйте. Помогите, пожалуйста решить проблему.
Нужно, чтобы при нажатии на кнопку, один блок всегда заменялся другим, и при нажатии на другую кнопку, возвращался первый блок.
Код:

$(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 ничего не происходит?

Форум

Справочник

Discord чат

Курсы javascript