jQuery ajax load()java脚本没有执行?
我已经阅读了几个关于这个问题的post,但我无法解决它。
我正在将一个html文件加载到div中。 我加载的文件包含一个无序列表。 应该扩展此列表(带有子菜单项的菜单)并关闭。 因此我需要js。 但不幸的是,这个脚本没有加载。
谁能帮我?
真是太棒了! 非常感谢 :)
如果我明白你的问题是正确的……
你想通过ajax加载到页面上的div中,我们可以调用它;
1)div id =“loadStuffHere”(abc.html)
2)填充“loadStuffHere”的东西来自xyz.html
所以就这样做;
$( “loadStuffHere”)负载( “xyz.html”);
可是等等!! 您不希望从xyz.html加载所有内容,您只想加载xyz.html的一部分(xyz.html)
所以就这样做;
$(“loadStuffHere”)。load(“xyz.html #loadMeOnly”);
可是等等!! 让我们说div id =“loadMeOnly”里面是一个手风琴,这意味着它必须被初始化,这意味着你还必须包括javascripts ……嗯,怎么做……
你会想到这样做;
$(“loadStuffHere”)。load(“xyz.html #loadMeOnly”); $ .getScript( ‘JS / xyz.js’);
以上是糟糕的,因为a)你需要创建一个外部的js文件和b)你实际上正在进行2次http调用,如果你用普通的非ajax方式做到这一点你可以用1次http调用。
所以…最好的解决方案是通过1次调用得到2个东西(HTML和js – 1行,1个http),这就是你如何做到的;
$(“loadStuffHere”)。load(“xyz.html #loadMeOnly,script”);
这会加载#loadMeOnly div和所有脚本标签,所以你会拥有它…快乐快乐:)
这里的诀窍是逗号……你可以选择加载任何你想要的doms
因此,请确保首先加载jQuery,确保指向库的链接位于HTML的头部,如下所示:
使用firebug通过选中“net”选项卡确保它已加载。
还要确保你正在加载你的 javascript :(这里我称之为“主”)
然后在你的js文件中执行以下操作:
$.(document).load( function () { alert("loaded!") });
一旦页面“完全加载”,这应该触发警报我更喜欢使用ready()
,一旦加载DOM就会触发。
如果你有这个全部工作,你真正想要做的是从你的js文件加载并执行js试试这个:
.getScript()
这将加载并执行您想要的JavaScript。
此解决方案效果最佳。 在加载特定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'); });
珠瑚。 我已经解决了。 不知道天哪这是最优雅的方式,但它的工作:)
jpsilvashy你的getscript(); 已经做到了:)我已经在我的内容中包含了这两行应该加载:
这样可行。
对于遇到同样问题的每个人,都会有一些小提示。 您应该删除正文和头部标记。 如果包含它们则不起作用。
但现在还有一个问题:为什么我需要在加载的内容中包含它? 我认为在将内容加载到dom之后必须加载JavaScript。
但那只是一些假设!
谢谢你的大力帮助!
该脚本无法使用document.ready,该文档已经准备就绪。 只需将脚本放在脚本标记之间即可。
错误:
正确:
啊,我明白了…如果你只想加载一些html使用:
$("selector for div ").load("/path_to_html.html div#main");
div#main
是我要在远程文件中检索的div
,但请记住它必须是同一个域才能工作。
您可以在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); }); });
您需要在无序列表上显式调用ahover。 请参阅文档 。