EventListener在添加的動態元素上不起作用

Question

我已經檢查了另一個問題，像這樣一個在計算器，但它並沒有解決我的問題。

我的問題是，每當我向動態添加的元素添加事件時。 但如果我單擊該元素，它將無法正常工作。 這意味着它無法正常工作。

這是我已經實現的：

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)"對於每個元素onclick="selected(i, j)"請參見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

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

ES6

div.addEventListener("click", _ => selected(i, j));

如果您在綁定函數中使用變量（如我所示），那么也會有另一個錯誤，當您在循環中使用var時，執行事件偵聽器時最后一個值將是執行值，如果使用let可以解決該錯誤代替

Answer 3

正如sunrize920和Benjaco所寫，您使eventListener錯誤。 您可能需要一個閉包，如下所示：

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