从动态 HTML 调用本地 JavaScript 函数答案

【问题标题】：Call local JavaScript function from dynamic HTML从动态 HTML 调用本地 JavaScript 函数
【发布时间】：2013-10-16 23:17:50
【问题描述】：

我有一个 JavaScript 文件，该文件包含在客户的网站上以执行访问者调查。所有代码都在一个匿名函数中，这导致了我需要为调查动态生成 HTML 的问题。

基本上，调查的 HTML 使用 JavaScript（作为 div）生成并添加到 DOM。该 HTML 的一部分具有指向其他函数（关闭、提交等）的超链接，但它看不到我在匿名函数包装器中拥有的任何函数。我不想仅仅为了这件作品公开我所有的方法。有什么办法可以让动态 HTML 来查看我的功能？另外，我不能使用 jQuery。

(function () {
...
function displaySurvey(x) {
        /// <summary>Server callback to display a survey to the user.</summary>
// content is a DIV I added to the DOM using createElement and appendChild
 content.innerHTML += "<div><span onclick='go()' style='cursor:pointer'>Submit</span>&nbsp;<span onclick='closeSurvey()' style='cursor:pointer'>Close</span></div>";

}

function closeSurvey()
{

}
...
}

【问题讨论】：

标签： javascript html scope

【解决方案1】：

您应该使用 JavaScript 创建您的 elements，设置 onclick，并附加到 content，以便这些元素可以处理您的私有函数（根据闭包的性质）。

我认为这大概就是您想要做的事情 (jsfiddle)：

HTML

<div id="div1">
</div>

JavaScript

var content = document.getElementById( "div1" );

(function() {
    function appendSpan() {
        var newSpan = document.createElement("span");
        newSpan.onclick = privateFunction;
        newSpan.innerHTML = "click on me!";
        content.appendChild(newSpan);
    }

    function privateFunction() {
        alert("i am private");
    }
    appendSpan();
}())

【讨论】：

试过了，但没用。我将我的 close 移到了 append 上方，append 是从哪里调用的，但它没有看到它。追加后设置innerhtml有关系吗？
也许我错过了你所说的关于元素的内容。我想我需要手动创建跨度。我会尝试并返回，
@KingOfHypocrites：最重要的一行是newSpan.onclick = privateFunction;。您需要以这种方式设置点击处理程序，而不是像您当前所做的那样在 HTML 字符串中设置。
你真是个天才。我每天都能学到新东西。
@KingOfHypocrites：很高兴我能帮上忙！ :-)

【解决方案2】：

不要从正确的原始答案中删除，但对于任何尝试这样做的人的一些提示：

我发现秘诀就是创建一个空的外部 div（使用 createElement），然后将其设置为 innerhtml 以开始工作。这使您不必一一设置所有样式。如果您有一个包含大量内部 div 和样式的 div，这将为您节省大量时间和代码。然后，您需要通过手动创建元素（通过 createElement 并将 onclick 分配给创建的元素，如接受的答案所示）来附加您的可点击项目。

请注意，在添加元素附加到文档的最大祖先之前，您将无法通过 id 找到元素，因此您必须确保以正确的顺序添加所有节点.通常，您会将外部 div 添加到文档中，然后找到要附加按钮的元素，然后附加它们。

另一件事是您不能在包含可点击项目（其父项）的任何内容上使用 += innerhtml（否则它会破坏您的内部可点击项目的 onclick 功能）。因此，您只需要确保您拥有设置任何动态 html 所需的正确内部 div。如果您需要在 html 的末尾进行扩展，请通过 createElement 添加另一个 div 并将其设置为适当的 innerhtml 以根据需要继续该过程。

【讨论】：