javascript-尝试添加内部 html 然后单击它不起作用

Question

我正在尝试将内部 html 添加到 div 元素，然后动态地向其添加点击事件。它提醒 1 但不提醒 2:

alert(wordsGeneral.length); //prints 9
for (var i = 0; i < wordsGeneral.length; i++)
{
    var word = wordsGeneral[i];
    if (wordsToCorrect[word]!= undefined)
    {

        document.getElementById("text").innerHTML += "<u id=\"" + i + "\" style=\"text-decoration: underline;text-decoration-color: red;\">" + word + "</u>";
        alert("1");
        document.getElementById(i).addEventListener("click", function () {
            alert("2");
        });
    }
}

有人可以帮忙吗？

Answer 1

似乎工作得很好:

i = 1;
word = i;
document.getElementById("text").innerHTML += "<u id=\""+i+"\" style=\"text-decoration: underline;text-decoration-color: red;\">" + word + "</u>";
alert("1");
document.getElementById(i).addEventListener("click", function () {
    alert("2");
});

<div id="text"/>

我会猜测您没有使用 HTML5，而 i 是一个数字，这在 HTML4 中是无效的:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").