jQuery ajax的load()方法无法执行JavaScript？

Question

我看过几篇关于这个问题的帖子，但是我无法解决它。

我正在将一个HTML文件加载到一个div中。文件包含一个无序列表。 这个列表应该是展开的（一个带有子菜单项的菜单）和关闭的。因此我需要JS。 但不幸的是这个脚本没有被加载。

有人能帮助我吗？

非常感谢！谢谢！:)

- johnlikesit

---

请展示一些代码… - CD..

这篇帖子中有更好的答案：https://dev59.com/x2Qo5IYBdhLWcg3wE70J#16352425 - jetlej

Answer 1

你想要通过 AJAX 加载内容到页面上的一个 div 元素中，我们把它叫做：

1）<div id="loadStuffHere"></div> （在 abc.html 中）

2）需要填充 loadStuffHere 的内容来自 xyz.html

那么只需要这样做：

$("loadStuffHere").load("xyz.html");

但是等等！！ 你不想加载所有来自 xyz.html 的内容，而只想加载 xyz.html 中的一部分，比如说 <div id="loadMeOnly"></div> 这个元素。

那么只需要这样做：

$("loadStuffHere").load("xyz.html #loadMeOnly");

但是等等！假设 <div id="loadMeOnly"></div> 里面包含一个手风琴，这意味着它必须被初始化并且你还需要包含相应的JavaScript文件... 嗯，该怎么办...

你可能会考虑这样做：

$("loadStuffHere").load("xyz.html #loadMeOnly");
$.getScript('js/xyz.js');

以上的方式很糟糕，因为a）你需要创建一个外部js文件，b）如果你按照正常的非ajax方式，可以只做1个http请求，但实际上你却发出了2个http请求。

最好的解决方案是用一次调用获取两件事情（HTML和js-1行，1个http），这里是如何做到的：

$("loadStuffHere").load("xyz.html #loadMeOnly, script");

这会加载#loadMeOnly div和所有的script标签。

关键在于逗号。你可以挑选需要加载的dom元素。

- user6890

---

除非--既然你已经加载了那个脚本，那么你如何运行它？ - ThatAintWorking

Answer 2

这个解决方案最好。在特定的div或内容容器加载后使用回调函数。

$('#CONTAINER').load('URL_TO_LOAD HTML_ELEMENT_TO_PLUCK_FROM_PAGE_AND_INSERT_INTO_CONTAINER', function () {
    $.getScript('PATH_TO_SCRIPT_THAT_YOU_REQUIRE_FOR_LOADED_CONTENT');
});

- user1313864

Answer 3

所以首先确保您已经加载了jQuery，确保库的链接位于HTML文件的头部，例如：

<script src="/javascripts/jquery-1.3.2.min.js" type="text/javascript"></script>

使用 Firebug 工具，通过检查 "net" 选项卡来确保它已经被加载。

同时，请确保你已经加载了 你自己的 JavaScript 文件：（这里我将其称为 "main"）

<script src="/javascripts/main.js" type="text/javascript"></script>

然后在您的js文件中做如下操作：

$.(document).load( function () {
  alert("loaded!")
});

当页面“完全加载”后，这应该会触发警报。我更喜欢使用ready()，它会在DOM加载完成时触发。

如果您已经做好了这一切，并且实际上想要做的是从您的js文件加载和执行js，请尝试以下操作：

.getScript()

这将加载并执行你想要的JavaScript代码。

- JP Silvashy

---

在哪里以及如何使用它？ 难道没有其他的可能性吗？ - johnlikesit

嗯，我很难弄清楚你想做什么，你确定你的页面上首先加载了jQuery吗？ - JP Silvashy

是的，我的页面目前运作良好。由于lod()请求，jQuery也必须起作用。唯一的问题是在加载的内容中的js。我不知道如何解决这个问题... :( - johnlikesit

好的，谢谢jpsilvashy，我会测试一下，很快就会回来 :) - johnlikesit

Answer 4

我解决了。不知道这是否是最优雅的方法，但它有效 :)

jpsilvashy你的getscript();已经解决了它 :) 我已经在我的内容中包含了这两行，应该被加载：

<script type="text/javascript"> 
$.getScript("js/tutorial-1.js");
$.getScript("js/jquery.ahover.js");
</script>

对于所有遇到同样问题的人，这里有一个小提示。您应该删除body和head标签。如果它们被包含在内，它将无法正常工作。

但现在仍然有一个问题：为什么我需要在加载的内容中包含这个？我认为JavaScript必须在内容加载到dom后加载。

但这只是一些假设！

感谢您的大力帮助！

- johnlikesit

---

有没有人知道一个解释？ - johnlikesit

Answer 5

脚本不能使用document.ready，因为文档已经准备好了。只需将脚本放置在

- btafarelo

Answer 6

您可以使用jQuery.getScript动态加载JavaScript文件并设置回调函数。当脚本已加载时，将调用回调函数。以下是从cdnjs加载highlightjs库的示例：

$.getScript("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js", function () {
    $('pre code').each(function(i, block) {
        // hljs now is available
        hljs.highlightBlock(block);
    });
});

- starikovs

Answer 7

啊，我明白了... 如果你只想加载一些HTML，请使用：

$("selector for div ").load("/path_to_html.html div#main");

在你的远程文件中，我想要检索的是 div#main 这个 div，但记住这必须是相同的域才能工作。

- JP Silvashy

---

能够正常工作的，你看到的菜单是已加载的内容。这个菜单应该被折叠在一起（JS实现了这一点）。而这个脚本没有被加载，这就是问题所在 :) - johnlikesit

打开 http://johnlikesit.jo.ohost.de/helpme/htmlcontent.html， 我在第二个文件中包含了 js 文件，只是为了向你展示我的意思 :) - johnlikesit

即使js文件被包含在两个文件中（第一个文件和应该在第一个文件中加载的HTML文件），它也无法工作:( - johnlikesit

因此，在加载的文件中，您不应该需要任何JavaScript，我们只会修改DOM，因此插入的内容仍将受到原始文件下运行的js的影响，包括您的所有事件等。我不确定您最终想要实现什么，您是否可以尝试以其他方式解释一下？ - JP Silvashy

好的，我会尝试翻译 :)应该插入的部分包含一个可以展开的菜单。据我所知，如果没有JavaScript，这是无法实现的。因此，首先我将来自文件“htmlcontent.html”的HTML内容加载到我的“index_helpme.html”中的div“container”中。到目前为止，这个方法是有效的。唯一的问题是与加载的htmlcontent.html进行交互。如果我想用jQuery更改CSS样式或制作一些效果，它就不起作用了。希望这个解释很清楚易懂 :)感谢您的帮助！ - johnlikesit

可能有更好的方法来构建主页，而不是通过jquery加载内容。我不知道。如果你有一些技巧，请告诉我 :) - johnlikesit

Answer 8

你需要显式地在无序列表上调用 ahover。请参见文档。

- Zed