Restart Game jQuery Function ne fonctionne pas

Question

Je suis en train d'utiliser un Jeu de mémoire basé sur jQuery sur mon site. Vous pouvez recommencer le jeu à tout moment. Ça fonctionne bien. Maintenant, quand je termine une partie et je clique sur Jouer de nouveau. Si je clique sur recommencer, ça ne fonctionne plus. Pourquoi et comment puis-je réparer cela?

Voici un exemple.

JS:

// ce script montre comment obtenir des informations sur le jeu
    var game = jQuery('div.slashc-memory-game'); // obtenir le jeu
    var info = jQuery('p#info').find('span'); // obtenir la boîte d'informations
    var restart = jQuery('a#restart').css('visibility', 'visible'); // obtenir le lien de recommencement
    var playAgain = jQuery('a#play-again').css('visibility', 'hidden'); // obtenir le lien de jouer de nouveau
    // formater le temps comme hh:mm:ss
    var formatTime = function(s)
    {
        var h = parseInt(s / 3600), m = parseInt((s - h * 3600) / 60); s = s % 60;
        return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
    }
    // écouter l'événement 'done' du jeu
    game.bind('done', function(e)
    {
        // afficher des statistiques de base
        var stats = game.slashcMemoryGame('getStats');
        info.html('Succès ! Nombre de clics : ' + stats.numClicks + ', temps écoulé : ' + formatTime(parseInt(stats.time / 1000)) + '.');
        playAgain.css('visibility', 'visible'); // afficher le lien
        restart.css('visibility', 'hidden'); // cacher le lien
    });
            // Action de recommencement
    restart.click(function(e)
    {
        game.slashcMemoryGame('restart'); // recommencer le jeu
    });
    // action de jouer de nouveau
    playAgain.click(function(e)
    {
        playAgain.css('visibility', 'hidden'); // cacher le lien
        info.html('Jeu de mémoire, cliquez pour révéler les images. Recommencer'); // réinitialiser le texte
        game.slashcMemoryGame('restart'); // recommencer le jeu
        e.preventDefault();
    });

HTML:

Jeu de mémoire, cliquez pour révéler les images. Recommencer Jouer de nouveau

Answer 1

Vous remplacez l'élément #restart chaque fois que vous cliquez sur #play-again à cette ligne:

info.html('Memory Game, cliquez pour révéler les images. Redémarrer');

Cela signifie que le gestionnaire de clic pour l'élément #restart n'est plus attaché au nouvel élément.

Vous devriez attacher le gestionnaire à un élément ancêtre qui est toujours présent dans le DOM en utilisant un gestionnaire d'événements délégué .on():

info.on('click', '#restart', function(e)
{
    game.slashcMemoryGame('restart'); // relancer le jeu
});

Fiddle

J'ai remplacé le gestionnaire d'événements directement lié à l'élément #restart par un gestionnaire d'événements délégué. Voici la référence pour en savoir plus: Événements directs et délégués. En gros, vous ne pouvez lier des gestionnaires d'événements qu'aux éléments actuellement dans le DOM, et :

Les événements délégués ont l'avantage de pouvoir traiter les événements des éléments descendants qui sont ajoutés au document ultérieurement.