在jQuery中禁用事件处理程序

Question

I'm creating a simple tic-tac-toe game and I have an event handler that triggers a lot of the functions in the code. The thing is, when the game is over, I want to disable that event handler so that the game can end and the user cannot interact with it. I've looked into it and unbind/bind, on/off/ prop/attr nulling don't work. Is there any other way to disable this event handler when a condition is met? I want to disable the .one('click') handler not the beginning parent handler.

//Creates the variables needed to be manipulated later
$(document).ready(function () {
    var X = 'X';
    var O = 'O';
    var currentPlayer;
    var turnCount = 0;
    var xMoves = [];
    var oMoves = [];
    var cellTracker;
    var winAlert;
    var winConditions = [
        ['c1', 'c2', 'c3'],
        ['c4', 'c5', 'c6'],
        ['c7', 'c8', 'c9'],
        ['c1', 'c4', 'c7'],
        ['c2', 'c5', 'c8'],
        ['c3', 'c6', 'c9'],
        ['c1', 'c5', 'c9'],
        ['c3', 'c5', 'c7']
    ];

    /*Set's the current player to X if turnCount is odd
    And to O if turnCount is even*/
    var setCurrentPlayer = function () {
        if (turnCount % 2 === 0) {
            currentPlayer = O;
        } else {
            currentPlayer = X;
        }
    };

    //Pushes cellTracker's value to the curent player's move variable
    var storeMoves = function () {
        if (currentPlayer === X) {
            xMoves.push(cellTracker);
        } else if (currentPlayer === O) {
            oMoves.push(cellTracker);
        }
    };

    //Compares players moves with the winConditions to determine a winner
    var determineWin = function (pMoves) {
        for (var i = 0; i < winConditions.length; i++) {
            if (winConditions[i].length > pMoves.length) {
                continue;
            }
            for (var j = 0; j < winConditions[i].length; j++) {
                winAlert = false;
                for (var k = 0; k < pMoves.length; k++) {
                    if (pMoves[k] === winConditions[i][j]) {
                        winAlert = true;
                        break;
                    }

                }
                if (!winAlert) break;
            }
             if (winAlert) {
                alert(currentPlayer + " wins!");
                break;
            }
        }
    };

    /*Place's an X or an O when a cell is clicked depending
    on the current player, and updates the turnCount*/
    $('td').one('click', function () {
        turnCount += 1;
        setCurrentPlayer();
        $(this).text(currentPlayer);
        cellTracker = $(this).attr('id');
        storeMoves();
        determineWin(currentPlayer == 'X' ? xMoves : oMoves);
        if (turnCount === 9 && winAlert === false) {
            alert("Tie game!");
        }
        console.log(turnCount, xMoves, oMoves, winAlert);
    });
});

Answer 1

Try defining it as a function instead:

var handler = function () {
        turnCount += 1;
        setCurrentPlayer();
        $(this).text(currentPlayer);
        cellTracker = $(this).attr('id');
        storeMoves();
        determineWin(currentPlayer == 'X' ? xMoves : oMoves);
        if (turnCount === 9 && winAlert === false) {
            alert("Tie game!");
        }
        console.log(turnCount, xMoves, oMoves, winAlert);
    });

And then attach it:

$('td').one('click', handler);

Whenever you want to remove it you can just go:

$('td').off('click', handler);

EDIT: you'll need to define the handler variable before you take it off, but that should be reasonable. Just define it at the top and set it before you call one and it should be available to any other part of the code.

EDIT: Took a look at your fiddle. See http://jsfiddle.net/c4496/1/ for a working solution. Like I said earlier, $.off always works: your usage was wrong. To do what you wanted you have to invoke the $.off call at the moment you detect that you want to end the game, not write the code at the bottom and expect it to get magically invoked for you anytime you change the variable value. If you want that sort of behavior go look at Knockout or AngularJS.

Answer 2

Have you tried disabling the element on which the click event occurs ? For example, if you want to disable click on your td element, you can use :

$('td').prop("disabled",true);

and when you want to re-enable it just use :

$('td').prop("disabled",false);

Nulling the prop or attr methods won't help. Use the above way. Hope it helps !

Answer 3

Use .off() and event name spacing

$('td').one('click.mygame', function () {
    turnCount += 1;
    setCurrentPlayer();
    $(this).text(currentPlayer);
    cellTracker = $(this).attr('id');
    storeMoves();
    determineWin(currentPlayer == 'X' ? xMoves : oMoves);
    if (turnCount === 9 && winAlert === false) {
        alert("Tie game!");
    }

    if(condition){ //like ( winAlert === true  || turnCount === 9)
        $('td').off('click.mygame')
    }

    console.log(turnCount, xMoves, oMoves, winAlert);
});

Demo: Fiddle