javascript - 如何在动态加载的 HTML 中执行 Javascript

Question

我有一个网页，我在其中动态更改 contentEditor div 中的 HTML，具体取决于用户在导航菜单中选择的主题。此 contentEditor div 中的 HTML 从外部脚本加载:

function updateContentEditor() {
var window = document.getElementById('contentEditor');

if(editingPage == "Homepagina") {       
    $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html");
new jscolor.color($line.find('input[name=color]')[0], {});
}
/* and so on... */
}

现在一切正常，每个页面都加载了正确的 html。不过我确实遇到了 Javascript 的问题..

我拥有的脚本中的文本字段之一应该是颜色选择器: 当我在浏览器中加载页面本身时，颜色选择器工作完美，但是当我在我的 contentEditor div 中加载此页面时，它没有加载:

颜色选择器是一个外部 Javascript(下载自:http://jscolor.com/download.php)。

我已经尝试将它加载到主页面和编辑器页面(编辑器是我在主页面加载的那个)，但这也不能解决问题。

问题当我在另一个 HTML 页面的 div 中加载包含该脚本的页面时，如何确保我的 Javascript 得到执行？

请注意我在主页中加载的编辑器中确实有其他 javascript。那是显示弹出式 div 的 javascript。没有任何问题。

非常感谢任何帮助!

Answer 1

你说它不加载 contenteditor id？请先检查 -> 你使用的是 jQuery 还是 Pure JS

function updateContentEditor() {
var window = document.getElementById('contentEditor');

if(editingPage == "Homepagina") {       
    $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html");
}
/* and so on... */
}

从你的代码中你混合了纯 JS 和 jQuery + 不知道你是否使用 jQuery

document.getElementById('contentEditor'); -> Pure JS
$("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html"); -> jQuery

如果您没有使用 jQuery -> $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html"); -> jQuery不会工作