My jQuery only works after page refresh

Question

My website has a list of games. One feature is being able to "watch" games. It's working well, but I can't reverse an action (watch/unwatch) unless I refresh the page.

Here's my jQuery:

$('.watch').click(function(e) {

    e.preventDefault();

    var game_id = $(this).data('game_id');
    $('#game-' + game_id + ' .watch').addClass('unwatch').removeClass('watch');

});

$('.unwatch').click(function(e) {

    e.preventDefault();

    var game_id = $(this).data('game_id');
    $('#game-' + game_id + ' .unwatch').addClass('watch').removeClass('unwatch');

});

Any ideas? Perhaps I can improve my code as well? Still learning jQuery/Javascript.

Thanks!

Answer 1

When you write the line $('.watch').click(callback); you attach callback to all element having .watch class at the moment of that line execution. When you change later the class of an element from .watch to .unwatch, it is not attached to callback you setted for .unwatch elements before.

You need to have a class .game for all you games and then :

$('.game').click(function(e) {

    e.preventDefault();

    var game_id = $(this).data('game_id');

    if($('#game-' + game_id).hasClass('unwatch')) {
        $('#game-' + game_id).addClass('watch').removeClass('unwatch');
    } else if ($('#game-' + game_id).hasClass('watch')) {
        $('#game-' + game_id).addClass('unwatch').removeClass('watch');
    }
});