JQuery Использование toggleClass () внутри .click () того же класса, похоже, не работает

Question

Так что я пытаюсь сделать что-то вроде системы голосования «вверх / вниз» на YouTube с использованием jquery, подразумевая, что после того, как пользователь проголосовал, оба div (изображения, неважно, что) станут недоступнымидля этого конкретного сообщения.

Пока что для этого я использую .click (), внутри которого toggleClass () изменит свой собственный класс, я вижу, что класс изменится, если я проверю DOM,но почему .click () все еще работает с новым классом?

//TO BE CALLED WHEN USER CLICKS VOTE FORGIVENESS
$('.voteUp').click(function() {
    var id = $(this).closest("article").attr("id");

    //Make it impossible to vote again
    $(this).toggleClass('voteUp votedUp');
    $(this).parent().find('.voteDown').toggleClass('voteDown votedDown');

});

И мой HTML (php)

        <article class='yellowSheet' id='57'>
            <div class="title">
                <h1>StuffUp says :</h1>
                <p class="story">What happened ?</p>
            </div>

            <div class="entryContent">
                <p>guy, 2011-06-28 17:11:48</p>
            </div>

            <div class="voting">
                <img class="voteUp" src="images/thumbsUp.png" /></div>
                <img class="voteDown" src="images/thumbsDown.png" /></div>
            <div class="storyBottom"></div>

        </article>

Что я не понимаю, так это почему после переключения классаЯ все еще могу нажать на новый класс votedDown, так как у этого класса нет метода .click?

Спасибо

Answer 1

Имя класса - это только средство, которое вы используете для сопоставления элемента: обработчик click зарегистрирован на самом элементе и будет вызываться независимо от того, предоставляет ли он класс или нет.

Вы можете использовать live () для регистрации обработчика событий, который будет вызываться только в том случае, если элемент все еще соответствует исходному селектору:

$(".voteUp").live("click", function() {
    // Your event handler.
});

Answer 2

Не уверен, что это имеет значение в данный момент, но у вас есть дополнительный "</div>", я переформатировал то, что вы должны сделать проблему яснее:

<div class="voting">
    <img class="voteUp" src="images/thumbsUp.png" />
</div> <!-- Extra close div -->
    <img class="voteDown" src="images/thumbsDown.png" />
</div>

Так что я не думаю, что find () в этом выражении будет соответствовать чему-либо:

 $(this).parent().find('.voteDown').toggleClass('voteDown votedDown');

Answer 3

На самом деле он привязывается к элементу, а не к классу.Имя класса просто используется для начального поиска.

В этом случае вы либо захотите использовать метод .unbind() для отмены привязки события click после его нажатия $(this).unbind('click');

OR

используйте метод .one() , который позволяет щелкать элемент только один раз.

$('.voteUp').one('click', function() {...

Answer 4

.click связывает обработчик событий со всеми сущностями, которые соответствуют вашему селектору, во время выполнения - поэтому, несмотря на удаление класса, у сущности все еще есть привязанное событие щелчка.

Вы можете сделать одну из двух вещей. Либо использовать:

$('.voteUp').live('click', function() { 
    // etc 
} ); 

'live' ведет себя так, как вы ожидаете 'click', и активируется только тогда, когда вы щелкаете по чему-то, что соответствует его селектору - и анализирует это каждый раз, когда вы нажимаете.

Или вы можете отменить привязку события вручную в обработчике событий, например:

$('.voteUp').bind('click.voteUp', function(e) { 
    $(this).unbind('click.voteUp'); 
   // and the rest of what you want to do; 
});

Во втором примере также используются обработчики событий в пространстве имен, удобная функция в jquery, которая означает, что будет удален только ваш именованный обработчик событий.

Answer 5

Я бы на самом деле удалил voiceUp и добавил votedUp.

$(this).removeClass('voteUp').addClass('votedUp');

Если вы хотите переключить класс, возможно, просто переключите 'votedUp', а не 'voiceUp votedUp'.Если у вас есть событие click, назначенное для критерия голосования, простое добавление слова «votedUp» в переключателе не приведет к удалению привязки щелчка.

Answer 6

Вы уже связали событие щелчка с объектом.Вы не можете удалить класс, ожидая, что событие click придет с ним.То, что вы хотите, это назвать это:

$(this).unbind('click');