Javascript, проблема с привязкой события к тегу div - PullRequest
Новая
       19

Javascript, проблема с привязкой события к тегу div

0 голосов
/ 14 марта 2010

Я пытаюсь привязать событие к динамически созданному div. 

function GameField(playerNumber) {
this.fields = new Array();
this.player = playerNumber;
this.isPlayerActive = false;
this.currentRound = 0;
}

GameField.prototype.InitField = function(fieldNumber) {
    var newField = document.createElement("div");
    if (fieldNumber == 0 || fieldNumber == 6 || fieldNumber == 8 || fieldNumber == 17)
        newField.className = 'gameCellSmall borderFull gameText gameTextAlign';
    else
        newField.className = 'gameCellSmall borderWithoutTop gameText gameTextAlign';
    newField.onclick = function() { this.DivClick('a'); }
    this.fields[fieldNumber] = newField;
    return newField;
}

GameField.prototype.DivClick = function(fieldNumber) {
    alert('Nummer: ' + fieldNumber);
}

Все работает отлично, но когда вы нажимаете на один из созданных элементов div, я получаю следующее сообщение об ошибке: Ошибка: объект не поддерживает это свойство или метод.

Если я заменил функцию onclick на эту, то она заработает: 

newField.onclick = function() { alert('Nummer: ' + fieldNumber); }

Как я могу получить событие onclick для запуска моей функции DivClick вместо этого?

Ответы [ 2 ]

2 голосов
/ 15 марта 2010

Проблема в том, что обработчик события onclick выполняется со значением this, указывающим на элемент DOM, который вызвал событие, поэтому выполнение this.DivClick завершается неудачей.

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

GameField.prototype.InitField = function(fieldNumber) {
    var newField = document.createElement("div");
    //...
    var instance = this;
    newField.onclick = function() { instance.DivClick('a'); }
    //...
}
0 голосов
/ 15 марта 2010

Вот так 

function DivClick (fieldNumber) {
        alert('Nummer: ' + fieldNumber);
    }

{this.DivClick ('a'); } - следует заменить на {DivClick ('a'); }

...