Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.08.2013, 22:08
Аспирант
Отправить личное сообщение для bartonom Посмотреть профиль Найти все сообщения от bartonom
 
Регистрация: 05.05.2011
Сообщений: 48

Клик по ссылке с заданным классом не срабатывает
Задача сохранить по клику на ссылку пользователя в список просмотра в БД.
Проблема в том, что переопределение класса ссылки с 'no_list' на 'in_list' не приводит к ожидаемому результату.
В общем, ссылка класс in_list получает, но все равно срабатывает при клике по ней обработчик
$('a.no_list').click(function() {...
, а должен бы срабатывать
$('a.in_list').click(function() {..
и соответственно уходить по вставляемой ссылке к файлу со списком просмотра.
Прошу помочь, кто знает в чем проблема.
Ниже четыре файла index.php. addWatch.php, watch.js и style.css.

Файл index.php
<?php header('Content-type: text/html; charset=utf-8');    ?>
<html>
<head>
 <link href="style.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
 <script type="text/javascript" src="watch.js"></script>   
</head>

<body>
 <?php 
 $w_user = array('Иванов','Андреев','Карпов');
 $re_user = array(0,1,0);            // для примера исходно в списке просмотра пользователь Андрееа
 $id_user = array(2,1,4);            // идентификаторы пользователей
 $log_user_id =187;          
 
 for ($i = 0; $i < 3; $i++) {  #3 
    echo "
	 <div class='card'> 
      <div class='fr'>";                            
         if ($id_user[$i]==$re_user[$i]) {          // если данный пользователь уже есть в списке просмотра
		   $existWatch = "in_list";                 // класс ссылки для него
		   $strTitle="К списку выбранных ";
		   $link = '/watchList.php';        
		 } else {                                   // иначе  - пользователя нет в списке просмотра
		   $existWatch = "no_list"; 
		   $strTitle="Сохранить ";		
		   $link = '#';		   
		 }
       
	      echo $w_user[$i]."
		      <a class='".$existWatch."' id='". $id_user[$i]."' rel='". $w_user[$i]."' href='".$link."'>
			    <span id='". $id_user[$i]."' >".$strTitle."</span>
			  </a>
      </div>
     </div>";
 } ?>    <!-- end #3 -->
</body>
</html>


Файл addWatch.php
<?php 
 $user = $_POST['id_user'];       // поле id добавляемого пользователя
//=============================================
//   Здесь код вставки добавляемого пользователя в БД
//=============================================
echo true;
?>


Файл watch.js
$(document).ready(function(){

$('.card').hover (
 function(){
  $(this).find('.fr').find('a.no_list').removeClass('no_list').addClass('show')   // делаем видимой ссылку 
 },
 function(){
  $(this).find('.fr').find('a.show').removeClass('show').addClass('no_list')   // делаем невидимой ссылку 
});

$('a.in_list').click(function() {	
 alert('из a.in_list');
});

$('a.no_list').click(function() {
  var this_link      = $(this);  
  var id_user   = $(this).attr('id');
  alert('link_class = ' + this_link.attr('class'));               // выводит класс 'in_list' ?!
  $.ajax (  
  { 
   type: "POST",
   url: "/addWatch.php",
   data: "id_user="+id_user,
   success: function(msg) {   
     if ( msg == true ) { 
	  this_link.removeClass('no_list').addClass('in_list')        // делаем видимой ссылку 
	  alert('this_link.attr(class) = '+ this_link.attr('class')); // выводит класс 'in_list' 
	  this_link.text('К списку выбранных');                           
	  this_link.attr('href','/watchList.php');                    // вставляем ссылку на список просмотра
  	 }
    } 
  })  
  return false;
});


Файл style.css
@charset "utf-8";
/* CSS Document */
.show {display: inline-block}
a.in_list {display: inline-block}
a.no_list{display: none}

.card {
 padding-top:10px;
 margin:35px 0 25px 0;
}

Не нашел чем код css обрамлять здесь
Ответить с цитированием
  #2 (permalink)  
Старый 13.08.2013, 23:06
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Дружище, ты чета путаешь. Ты делаешь выборку DOM-элементов, навешиваешь на них обработчик события. Потом ты меняешь какое-то свойство этих элементов (в твоем случае это их css-класс, это абсолютно не важно). И чего ты после этого ждешь? С какого перепугу обработчик должен удалиться?

jQuery разлагает мозг. Народ не понимает как работает скрипт и начинает выдумывать собственные правила)
Вот почему нужно сначала изучить базу, а затем уже какие-то либы, типа jQuery и прочего.

Последний раз редактировалось danik.js, 13.08.2013 в 23:09.
Ответить с цитированием
  #3 (permalink)  
Старый 13.08.2013, 23:35
Аспирант
Отправить личное сообщение для bartonom Посмотреть профиль Найти все сообщения от bartonom
 
Регистрация: 05.05.2011
Сообщений: 48

Сообщение от danik.js Посмотреть сообщение
Дружище, ты чета путаешь. Ты делаешь выборку DOM-элементов, навешиваешь на них обработчик события. Потом ты меняешь какое-то свойство этих элементов (в твоем случае это их css-класс, это абсолютно не важно). И чего ты после этого ждешь? С какого перепугу обработчик должен удалиться?

jQuery разлагает мозг. Народ не понимает как работает скрипт и начинает выдумывать собственные правила)
Вот почему нужно сначала изучить базу, а затем уже какие-то либы, типа jQuery и прочего.
Согласен, потому и вопросы, что есть непонимание. Но с учетом этого, клик идет по этому же элементу но с другим классом. Поэтому предположил, что событие клика будет относиться к нему. Наверное надо убрать временно обработчик первый, а после вновь его подключить. Задачу надо решать, буду копать. Спасибо что откликнулись
Ответить с цитированием
  #4 (permalink)  
Старый 13.08.2013, 23:58
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Есть вариант, который работает примерно так как ты ждал этого от своего кода:
$(document).on('click', 'a.no_list', function(){
    // этот обработчик сработает только если элемет соответствует селектору (в момент события) a.no_list
});

$(document).on('click', 'a.in_list', function(){
    // этот обработчик сработает только если элемет соответствует селектору (в момент события) a.in_list
});


Работает это так: обработчик (скрытый, служебный, так сказать) фактически навешивается на document. В момент клика элемент, по которому произошел клик проверяется: соответствует ли он заданному селектору. Если соответствует, то запускается обработчик (тот что ты задал). Таким образом селектор проверяется в момент события, а не в момент навешивания обработчика.

Вместо document можно прописать более специфичный элемент, например div.card
Ответить с цитированием
  #5 (permalink)  
Старый 14.08.2013, 00:04
Интересующийся
Посмотреть профиль Найти все сообщения от moskitos80
 
Регистрация: 11.08.2013
Сообщений: 28

Сообщение от bartonom
Задачу надо решать, буду копать.
Сдается мне копать надо в сторону JQuery функции "on"
Ответить с цитированием
  #6 (permalink)  
Старый 14.08.2013, 11:05
Аспирант
Отправить личное сообщение для bartonom Посмотреть профиль Найти все сообщения от bartonom
 
Регистрация: 05.05.2011
Сообщений: 48

Сообщение от danik.js
Есть вариант, который работает примерно так как ты ждал этого от своего кода:
(document).on('click', 'a.no_list', function(){
Спасибо за подсказку сработало
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать клик по ссылке с другой ссылки или div ? ilyas-> Элементы интерфейса 15 01.08.2013 11:49
Клик по ссылке через каждое №-ое количество времени. lamer Элементы интерфейса 12 17.03.2012 08:17
Добавление атрибута к ссылке с классом stereomaniac1 Общие вопросы Javascript 1 25.01.2012 14:53
Клик по ссылке Саша82 Events/DOM/Window 3 24.01.2012 22:43
Клик по ссылке из подгружаемого скрипта jokerbot jQuery 4 31.03.2010 20:34