Отключение обработчика событий в jQuery

Question

Я создаю простую игру tic-tac-toe, и у меня есть обработчик событий, который запускает много функций в коде. Дело в том, что когда игра окончена, я хочу отключить этот обработчик событий, чтобы игра закончилась, и пользователь не может с ней взаимодействовать. Я просмотрел его, и unbind/bind, on/off/prop/attr nulling не работают. Есть ли другой способ отключить этот обработчик событий при выполнении условия? Я хочу отключить обработчик .one ('click'), а не начальный обработчик.

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

Постарайся определяя его как функцию вместо:

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); 
    }); 

А потом присоединить его:

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

Всякий раз, когда вы хотите, чтобы удалить его, вы можете просто пойти:

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

EDIT : вам нужно определить переменную обработчика, прежде чем снимать ее, но это должно быть разумным. Просто определите его вверху и установите его перед тем, как позвонить one, и он должен быть доступен для любой другой части кода.

EDIT: взглянул на вашу скрипку. См. http://jsfiddle.net/c4496/1/ для рабочего решения. Как я уже говорил, $.off всегда работает: ваше использование было неправильным. Чтобы сделать то, что вы хотели, вам нужно вызвать вызов $.off в тот момент, когда вы обнаруживаете, что хотите закончить игру, а не писать код внизу и ожидать, что он будет вызван магическим образом для вас в любое время, когда вы измените значение переменной. Если вы хотите, чтобы такое поведение смотрелось на Knockout или AngularJS.

Answer 2

Вы пытались отключить элемент, на котором произошло событие клика? Например, если вы хотите, чтобы отключить клик по td элемента, вы можете использовать:

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

и когда вы хотите, чтобы включить его просто использовать:

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

Обнуление гребного винта или атр методы не поможет. Используйте вышеуказанный путь. Надеюсь, поможет !

Answer 3

Использование .off() и название события интервал

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

Демо: Fiddle