从动态HTML调用本地JavaScript函数

Question

我有一个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()
{

}
...
}

Answer 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();
}())

Answer 2

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

我发现秘诀只是创建一个空的外部div（使用createElement）然后设置它的innerhtml来启动。 这可以防止您逐个设置所有样式。 如果你有一个拥有大量内部div和样式的div，这将为你节省大量的时间和代码。 然后，您需要通过手动创建元素来附加可点击项目（通过createElement并将onclick分配给已创建的元素，如接受的答案中所示）。

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

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