Клик по ссылке с заданным классом не срабатывает
Задача сохранить по клику на ссылку пользователя в список просмотра в БД.
Проблема в том, что переопределение класса ссылки с '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 обрамлять здесь |
Дружище, ты чета путаешь. Ты делаешь выборку DOM-элементов, навешиваешь на них обработчик события. Потом ты меняешь какое-то свойство этих элементов (в твоем случае это их css-класс, это абсолютно не важно). И чего ты после этого ждешь? С какого перепугу обработчик должен удалиться?
jQuery разлагает мозг. Народ не понимает как работает скрипт и начинает выдумывать собственные правила) Вот почему нужно сначала изучить базу, а затем уже какие-то либы, типа jQuery и прочего. |
Цитата:
|
Есть вариант, который работает примерно так как ты ждал этого от своего кода:
$(document).on('click', 'a.no_list', function(){
// этот обработчик сработает только если элемет соответствует селектору (в момент события) a.no_list
});
$(document).on('click', 'a.in_list', function(){
// этот обработчик сработает только если элемет соответствует селектору (в момент события) a.in_list
});
Работает это так: обработчик (скрытый, служебный, так сказать) фактически навешивается на document. В момент клика элемент, по которому произошел клик проверяется: соответствует ли он заданному селектору. Если соответствует, то запускается обработчик (тот что ты задал). Таким образом селектор проверяется в момент события, а не в момент навешивания обработчика. Вместо document можно прописать более специфичный элемент, например div.card |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 23:11. |