Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.08.2011, 16:20
Интересующийся
Отправить личное сообщение для egreek Посмотреть профиль Найти все сообщения от egreek
 
Регистрация: 22.08.2011
Сообщений: 18

работа с 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>

Последний раз редактировалось egreek, 22.08.2011 в 16:36.
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2011, 16:31
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

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


Но есть и другой подход: навешать обработчик на какой-нибудь элемент из иерархии предков (который не будет удален в ходе манипуляций) и, определяя элемент под курсором (не обязательно тот, к которому привязан обработчик), производить с ним операции. Такой подход не пострадает от вставки / удаления элементов, т.к. обработчик не будет удалён.
В jQuery для этого есть jQuery.live.
Ответить с цитированием
  #3 (permalink)  
Старый 22.08.2011, 16:37
Интересующийся
Отправить личное сообщение для egreek Посмотреть профиль Найти все сообщения от egreek
 
Регистрация: 22.08.2011
Сообщений: 18

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

Последний раз редактировалось egreek, 22.08.2011 в 16:42.
Ответить с цитированием
  #4 (permalink)  
Старый 22.08.2011, 16:44
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Сообщение от egreek
А может тут фишка в том, что я манипулирую объектом, который изначально не существовал? Ведь элемент с id="a2" создается динамически уже после загрузки документа.
И это тоже немаловажно. Потому что в момент выполнения
$("#a2").click(…)
никакого элемента нет и присоединять обработчик не к чему.
Ответить с цитированием
  #5 (permalink)  
Старый 22.08.2011, 17:11
Интересующийся
Отправить личное сообщение для egreek Посмотреть профиль Найти все сообщения от egreek
 
Регистрация: 22.08.2011
Сообщений: 18

ага, спасибо.
Ответить с цитированием
  #6 (permalink)  
Старый 14.02.2013, 18:18
Новичок на форуме
Отправить личное сообщение для lololo Посмотреть профиль Найти все сообщения от lololo
 
Регистрация: 14.02.2013
Сообщений: 1

Здравствуйте. Помогите, пожалуйста решить проблему.
Нужно, чтобы при нажатии на кнопку, один блок всегда заменялся другим, и при нажатии на другую кнопку, возвращался первый блок.
Код:
$(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 ничего не происходит?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Удаленная работа для JavaScript разработчика yajilt Работа 4 19.03.2011 11:51
Это работа, за неё нужно платить деньги... Kolyaj Оффтопик 20 25.01.2011 20:44
Работа с хеш-частью адреса Andrei jQuery 9 07.01.2011 10:44
Обращение к другому файлу... Работа с дрйгой страницей... Student Общие вопросы Javascript 4 11.06.2009 10:42
небольшая работа - интерфейс в ява скрипте :) int9 Работа 0 08.12.2008 22:51