Мой jQuery работает только после обновления страницы

Question

На моем сайте есть список игр. Одна из особенностей - возможность «смотреть» игры. Он работает хорошо, но я не могу отменить действие (watch/unwatch), если я не обновляю страницу.

Вот мой 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'); 

}); 

Любые идеи? Возможно, я также смогу улучшить свой код? Все еще изучая jQuery/Javascript.

Спасибо!

Answer 1

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

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

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

    if ($(this).data('flag')) { 
     $('#game-' + game_id + ' .watch').toggleClass('watch unwatch'); 
    }else{ 
     $('#game-' + game_id + ' .unwatch').toggleClass('watch unwatch'); 
    } 

    $(this).data('flag', !$(this).data('flag')); 

}); 

Answer 2

Когда вы пишете строку $('.watch').click(callback); прикрепить callback ко всему элементу, имеющим .watch класса в момент выполнения этой строки. Когда вы позже меняете класс элемента с .watch на .unwatch, он не привязан к обратному вызову, который вы ранее задавали для элементов .unwatch.

Вы должны иметь класс .game для всех вас игр, а затем:

$('.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'); 
    } 
}); 

Answer 3

Разделите ваш клик событие в двух различных функций

использовать следующий код JQuery

//call watch to bind watch click event 
    watch(); 

    // watch method to bind watch class click event 
    function watch(){ 
     $('.watch').click(function(e) { 

     e.preventDefault(); 

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

     //bind unwatch class click event 
     unwatch(); 
     }); 
    } 

// unwatch method to bind unwatch class click event 
    function unwatch(){ 
     $('.unwatch').click(function(e) { 

     e.preventDefault(); 

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

     //bind watch class click event 
     watch(); 
     }); 
    }