Question

我在stackoverflow上检查了另一个问题，例如this，但这并不能解决我的问题。

我的问题是，每当我向动态添加的元素添加事件时。但如果我单击该元素，它将无法正常工作。这意味着它无法正常工作。

这是我实现的：

function init() {
    let promptMessage = 'Enter the number of rows and columns'
    let promptDefault = '1 1';
    let prompt = this.prompt(promptMessage, promptDefault);
    if (prompt) {
        prompt = prompt.split(" ")
        console.log(prompt);
        prompt[0] = Number(prompt[0]);
        prompt[1] = Number(prompt[1]);
        return prompt;
    }
    return init()
}

function selected(i, j) {
    return console.log(`You clicked on row ${i} and column ${j}`)
}

var gameSize = init(),
    rows = gameSize[0],
    cols = gameSize[1],
    boardGame = document.querySelector('.board');

for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
        let div = document.createElement('div');
        div.className = `block cell-${i}-${j}`;
        div.addEventListener("click", selected(i, j));
        boardGame.appendChild(div);
    }
}

问题：我希望每当我检查文档时都在提示符下输入数字后，对于每个元素，请参见onclick="selected(i, j)"。但这行不通。由于浏览器呈现了html文件，因此它会console.log所有元素，以防万一我没有单击它们。问题出在哪里？

Answer 1

据我所知，div.addEventListener("click", selected(i, j));是有问题的一行。

您要在此处调用函数selected（这就是为什么您看到加载日志的原因）并将其值分配为处理程序（在这种情况下未定义）。您实际上打算分配功能。

更改

function selected(i, j) {
    return console.log(`You clicked on row ${i} and column ${j}`)
}

到

function selected(i, j) {
    return function(){
         console.log(`You clicked on row ${i} and column ${j}`);
    }
}

这种使用高阶函数的方法使您可以关闭i和j来构建一个函数，该函数一旦被调用，就会记录适当的值

Answer 2

您确实错误地绑定了函数，该函数立即执行，并且返回值（null）现在是您的事件侦听器。您需要像函数一样绑定它。

ES5

function doGet(e){
 var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/SpreadsheetID/edit#gid=0");
 var sheetName = e.parameter.sheet;
 var sheet = ss.getSheetByName(sheetName);
 return getClasses(sheet); 
}

ES6

div.addEventListener("click", function(){ selected(i, j) });

如果您在绑定函数中使用变量（如我所示），那么也会遇到另一个错误，当您在循环中使用div.addEventListener("click", _ => selected(i, j));时，执行事件侦听器时最后一个值将是执行值，该错误如果改用var可以解决

Answer 3

正如sunrize920和Benjaco所写，您使eventListener错误。您可能需要的是一个闭包，像这样：

div.addEventListener("click", function() {
  return selected(i, j)
});

EventListener在添加的动态元素上不起作用

3 个答案: