2

私は自分のサイトでjQueryベースのメモリゲームを使用しています。いつでもゲームを再開できます。よく働く。今、私はゲームを終了し、次にPlayAgainを押します。再起動を押すと、機能しなくなります。なぜ、どのように修正すればよいですか？

これがフィドルです。

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>
4

1 に答える 1

2

この行#restartをクリックするたびに、要素を置き換えています。#play-again

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

これは、要素のクリック ハンドラー#restartが新しい要素に関連付けられなくなったことを意味します。

デリゲートされたイベント ハンドラーを使用して、常に DOM に存在する先祖要素にハンドラーをアタッチする必要があります.on()。

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

フィドル

#restart要素の直接バインドされたイベント ハンドラーを委任されたイベント ハンドラーに置き換えました。追加の読み取りのリファレンスは次のとおりです: Direct and delegated events。基本的に、現在 DOM にある要素にのみイベント ハンドラーをバインドできます。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。

于 2012-08-28T23:25:49.383 に答える