JavaScript动态加载jQuery库
问题描述:
为什么需要点击两次按钮才能使jQuery代码工作? 浏览器加载此文件,并加载脚本标记存在于头部分。但是这个代码只能在2次点击后才能使用。JavaScript动态加载jQuery库
function j1() {
$("button").click(function() {
$("p").hide();
});
}
function load1() {
var target = document.getElementsByTagName("head");
var newScript = document.createElement("script");
var url =
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";
newScript.src = url;
target[0].appendChild(newScript);
newScript = document.createElement("script");
url = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";
newScript.src = url;
target[0].insertBefore(newScript, target[0].firstChild);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="load1();">
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button onclick="j1();">Click me</button>
</body>
</html>
答
的.click()
调用注册了一个新的点击收听。因此,用户按一次按钮注册点击监听器,然后再次按下该按钮以隐藏段落。
取而代之,只需删除onclick
标记,然后使用.click()
侦听器,反之亦然。
function load1() {
var target = document.getElementsByTagName("head");
var newScript = document.createElement("script");
var url =
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";
newScript.src = url;
target[0].appendChild(newScript);
newScript = document.createElement("script");
url = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";
newScript.src = url;
target[0].insertBefore(newScript, target[0].firstChild);
$("button").click(function() {
$("p").hide();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="load1();">
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
+0
您好Derek,感谢您的回复......也许我错过了我的问题中的一个重要项目......目标是动态加载JQuery库......作为CDN不可用时的备份......而且我不能“ t找到一种方法让jQuery代码在onload后立即运行....我希望有人会知道答案...再次感谢... –
答
我加入了一些细节,这个问题......所以,你可以看到下面,我的小js文件加载和简单的功能效果很好先点击.. 。这回顾了原始问题,为什么JQuery在通过Js代码加载时行为有所不同?
function load2()
{
var target = document.getElementsByTagName("head");
var newScript = document.createElement("script");
var url = "js_libs/f1.js";
newScript.src = url;
target[0].appendChild(newScript);
}
<body onload="load1(); load2();" >
<button onclick="f1();">Click me too</button>
答
解决这个问题被发现了一个问题,#2 ...
这是解决该问题的代码..
<script type='text/javascript'>
runScript();
function runScript()
{
// Script that does something and depends on jQuery being there.
if(window.$)
{
// do your action that depends on jQuery.
}
else
{
// wait 50 milliseconds and try again.
window.setTimeout(runScript, 50);
}
}
</script>
难道您调试码?在j1()的第一行设置一个断点。 –
我没有JS的调试器,但我非常彻底地检查它。我也在运行它,并用Chrome“检查”来检查它。 –
我能够动态地将JQuery添加到
或HTML(在浏览器上查看),但需要两次调用J1()才能让JQuery完成这项工作。顺便说一句,在load1()内部调用J1()也不起作用。 –