Задача сохранить по клику на ссылку пользователя в список просмотра в БД.
Проблема в том, что переопределение класса ссылки с '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 обрамлять здесь
