Question

我有一个javascript函数，我打算用它来创建/添加一个'subLink'div的链接，并在这个链接上添加一个onclick事件，将相关的'content'加载到contentDiv：

function addSubLink(text, name, content) {
// append programLink span to subLinks:
    document.getElementById("subLinks").innerHTML += "<span class=\"programLink\" id=\"" + name + "\">" + text + "</span>";
// load program content onclick:
    document.getElementById(name).onclick = function () {
        // set value of programContent to content's value
        document.getElementById("programContent").innerHTML = content;
    }
}

例如，通过loadAboutPage（）来填充subLink div，可以调用此函数

var whatContent = "<p>A website!</p>";
var whyContent = "<p>Recreation!</p>";
var howContent = "<p>Kludges.</p>";
addSubLink("WHAT", "whatLink", whatContent);
addSubLink("WHY", "whyLink", whyContent);
addSubLink("HOW", "howLink", howContent);

问题是只有最后一个subLink附加了一个onclick事件（加载内容并更改css类）。也就是说，它会创建WHAT，WHY和HOW链接，但只会将onclick函数附加到最后调用的函数：HOW，在这种情况下。

当涉及到JavaScript时，我非常生疏，所以我不知道这是因为我对匿名函数缺乏了解，还是错误地使用了本地'name'变量，或者其他完全不同的东西。我已经搜索了一段时间，但似乎我太无知甚至无法弄清楚类似的问题会是什么！

无论如何，我非常感谢你的帮助！提前谢谢！

编辑：

这是一个完整的HTML示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>Stack Overflow Example</title>
        <script type="text/javascript">

            function addSubLink(text, name, content) {
                document.getElementById("subLinks").innerHTML += "<span class=\"programLink\" id=\"" + name + "\">" + text + "</span>";
                document.getElementById(name).onclick = function () {
                    document.getElementById("program").innerHTML = content;
                }
            }

            window.onload = function() {
                var whatContent = "<p>A website!</p>";
                var whyContent = "<p>Recreation!</p>";
                var howContent = "<p>Kludges.</p>";
                addSubLink("WHAT", "whatLink", whatContent);
                addSubLink("WHY", "whyLink", whyContent);
                addSubLink("HOW", "howLink", howContent);
            }

        </script>
    </head>

    <body>
        <div id="container">
            <div id="programWindow">
                <div id="subLinks"> </div>
                <div id="program"> </div>
            </div>
        </div>
    </body>
</html>

Answer 1

问题是由于：

....innerHTML += "...";

通过设置innerHTML，首先删除所有现有子元素，然后解析标记以创建新元素。因此，虽然原始“WHAT”和“WHY”跨度确实具有onclick绑定，但它们已被类似元素取代。< / p>

要附加新元素和保持状态，您需要使用createElement()，appendChild()和createTextNode()等DOM方法（或设置{ {3}} / textContent）：

function addSubLink(text, name, content) {
    var span = document.createElement('span');
    span.className = 'programLink';
    span.id = name;
    span.appendChild(document.createTextNode(text));

// append programLink span to subLinks:
    document.getElementById('subLinks').appendChild(span);

// load program content onclick:
    span.onclick = function () {
        // set value of programContent to content's value
        document.getElementById("programContent").innerHTML = content;
    };
}

示例：innerText

由于innerHTML的使用，JavaScript onclick函数未绑定

1 个答案: