1

我有一个包含在客户网站上的 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()
{

}
...
}
4

2 回答 2

2

您应该使用 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();
}())
于 2013-10-16T23:36:09.667 回答
0

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

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

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

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

于 2013-10-18T16:10:27.637 回答