Question

I am using a jQuery Based Memory Game on my site. You can restart the game at anytime you like. Works great. Now I finish a game then I hit Play Again. If I hit restart it no longer works. Why and How do I fix it?

Here is a fiddle.

JS:

// this script shows how you can get info about the game
    var game = jQuery('div.slashc-memory-game'); // get the game
    var info = jQuery('p#info').find('span'); // get the info box
    var restart = jQuery('a#restart').css('visibility', 'visible'); // get the play again link
    var playAgain = jQuery('a#play-again').css('visibility', 'hidden'); // get the play again link
    // format time like 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);
    }
    // listen for game 'done' event 
    game.bind('done', function(e)
    {
        // show basic stats
        var stats = game.slashcMemoryGame('getStats');
        info.html('Success ! Number of clicks : ' + stats.numClicks + ', elapsed time : ' + formatTime(parseInt(stats.time / 1000)) + '.');
        playAgain.css('visibility', 'visible'); // show link
        restart.css('visibility', 'hidden'); // show link
    });
            // Restart action
    restart.click(function(e)
    {
        game.slashcMemoryGame('restart'); // restart game
    });
    // play again action
    playAgain.click(function(e)
    {
        playAgain.css('visibility', 'hidden'); // hide link
        info.html('Memory Game, click to reveal images. <a id="restart" href="#">Restart</a>'); // reset text
        game.slashcMemoryGame('restart'); // restart game
        e.preventDefault();
    });

HTML:

<p id="info"><span>Memory Game, click to reveal images. <a id="restart" href="#">Restart</a></span> <a id="play-again" href="#">Play Again</a></p>

Answer 1

You’re replacing the #restart element whenever you click #play-again at this line:

info.html('Memory Game, click to reveal images. <a id="restart" href="#">Restart</a>');

This means the click handler for the #restart element is no longer attached to the new element.

You should attach the handler to an ancestor element which is always present in the DOM using a delegated event handler .on():

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

Fiddle

I replaced the #restart element’s directly-bound event handler with a delegated event handler. Here’s the reference for an extra read: Direct and delegated events. Basically, you can only bind event handlers to elements currently in the DOM, and:

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.