В моем коде ниже я меняю class
link
с user
на red
. Идея состоит в том, что ссылка с классом red не должна работать при нажатии. Но это так и есть. Почему это происходит? Я собирался использовать в live
, но читать его устаревшим, и я должен использовать on
.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script type="text/javascript" src="http://localhost/site/scripts/jQuery.js"></script>
<script type="text/css">
.red{
color:red;
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".user").on("click",function() {
alert('Was Clicked');
var idPri = $(this).data("id");
var idSec = $(this).data("sec");
$('.user[data-id="'+idPri+'"][data-sec="'+idSec+'"]').removeClass('user').addClass('red');
$('.h2[data-id="'+idSec+'"]').find('span[data-sec="'+idSec+'"].user').remove();
});
return false;
});
</script>
</head>
<body>
<div id="container">
<div class="h2" data-id="2">Who is your favorite Math teacher?
<div>* User Name <span class="user" data-id="3" data-sec="2">Like</span></div>
<div>* User Name <span class="user" data-id="4" data-sec="2">Like</span></div>
<div>* User Name <span class="user" data-id="5" data-sec="2">Like</span></div>
<div>* User Name <span class="user" data-id="6" data-sec="2">Like</span></div>
<div>* User Name <span class="user" data-id="7" data-sec="2">Like</span></div>
</div>
</div>
</body>
</html>
Вы можете попробовать использовать делегированные события. Но если вы хотите использовать .user
класс .user
, вы можете сделать что-то вроде этого:
$(document).ready(function() {
$(".user").on("click",function() {
if($(this).hasClass('red')){
return false;
}
alert('Was Clicked');
var idPri = $(this).data("id");
var idSec = $(this).data("sec");
$('.user[data-id="'+idPri+'"][data-sec="'+idSec+'"]').removeClass('user').addClass('red');
$('.h2[data-id="'+idSec+'"]').find('span[data-sec="'+idSec+'"].user').remove();
});
});
проверьте демо здесь: http://jsfiddle.net/PkBAq/
Вы используете обработчики прямых событий. Когда вы вызываете $(".user").on("click",function() {
, обработчики событий привязаны к вашим элементам. Позже, когда вы меняете свой класс на red
, обработчики событий уже прикреплены и будут по-прежнему запускаться В вашем случае вы можете попробовать делегированные обработчики событий:
$("#container").on("click",".user",function() {
С другой стороны, делегированные обработчики событий оцениваются динамически, потому что обработчики событий не привязаны непосредственно к элементам, а скорее к контейнеру.
Попробуй это:
$(".user","#container").on("click",function() {});
вы должны использовать on
на контейнере, чтобы события могли быть делегированы.
$("#container").on("click",'.user',function() {
alert('Was Clicked');
var idPri = $(this).data("id");
var idSec = $(this).data("sec");
$('.user[data-id="'+idPri+'"][data-sec="'+idSec+'"]').removeClass('user').addClass('red');
$('.h2[data-id="'+idSec+'"]').find('span[data-sec="'+idSec+'"].user').remove();
});
return false;
});
вот скрипка http://jsfiddle.net/JPGqq/
.user
вместо#container
? Мне так нужно ...live
и он отлично работает с кодом, который я разместил. Что-то не так с использованиемlive
?