1

我在 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 时，我非常生疏，所以我不知道这是因为我对匿名函数缺乏了解，还是错误地使用了本地“名称”变量，或者其他完全不同的东西。我已经搜索了一段时间，但似乎我太无知了，甚至无法弄清楚类似的问题会是什么！

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

编辑：

这是一个完整的 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>
4

1 回答 1

6

问题是由于：

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

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

要添加新元素并保持状态，您需要使用 DOM 方法，如createElement()、 appendChild()和createTextNode()（或 set textContent/ innerText）：

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;
    };
}

示例：http: //jsfiddle.net/bG7Dt/

于 2013-04-21T05:16:29.097 回答