从动态 HTML 调用本地 JavaScript 函数

Call local JavaScript function from dynamic HTML

本文关键字：JavaScript 函数 调用 动态 HTML      更新时间：2023-09-26

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

你应该创建你的elements，设置onclick，并附加到content，使用JavaScript，以便元素有一个对你的私有函数的句柄（对闭包的性质执行）。

我认为这大约是您要做的（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();
}())

不要拿走正确的原始答案，但给任何试图这样做的人的一些提示：

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

请注意，在添加元素附加到

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

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

相关文章：