JQuery. Не работает со ссылкой после изменения класса

0

В моем коде ниже я меняю 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>
Теги:

4 ответа

1
Лучший ответ

Вы можете попробовать использовать делегированные события. Но если вы хотите использовать .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/

3

Вы используете обработчики прямых событий. Когда вы вызываете $(".user").on("click",function() {, обработчики событий привязаны к вашим элементам. Позже, когда вы меняете свой класс на red, обработчики событий уже прикреплены и будут по-прежнему запускаться В вашем случае вы можете попробовать делегированные обработчики событий:

$("#container").on("click",".user",function() {

С другой стороны, делегированные обработчики событий оцениваются динамически, потому что обработчики событий не привязаны непосредственно к элементам, а скорее к контейнеру.

  • 0
    Могу ли я использовать .user вместо #container ? Мне так нужно ...
  • 0
    Я попытался использовать live и он отлично работает с кодом, который я разместил. Что-то не так с использованием live ?
Показать ещё 3 комментария
2

Попробуй это:

$(".user","#container").on("click",function() {});
2

вы должны использовать 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/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню