Question

我正在尝试将事件绑定到动态创建的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函数？

Answer 1

问题是onclick事件处理程序执行时this值指向触发事件的DOM元素，这就是执行this.DivClick失败的原因。

您需要强制执行上下文，以便在事件处理程序中使用实例方法，例如，您可以存储对当前实例的引用：

GameField.prototype.InitField = function(fieldNumber) {
    var newField = document.createElement("div");
    //...
    var instance = this;
    newField.onclick = function() { instance.DivClick('a'); }
    //...
}

Answer 2

这就是方式

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

{this.DivClick（'a'）; } - 应该替换为{DivClick（'a'）; }

Javascript，将事件绑定到div-tag的问题

2 个答案: