Javascript动态加载jQuery库
[英]Javascript loading jQuery library dynamically
问题描述
Why does it take two clicks on the button to make this jQuery code work? 
为什么需要两次单击按钮才能使此jQuery代码正常工作？ The browser loads this file and onload the script tag is present in the head section. 浏览器将加载此文件，并在顶部加载脚本标签。 But this code works only after 2 clicks. 但是此代码仅在单击2次后有效。
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>
3 个解决方案
解决方案1
2 2017-10-20 19:17:47
The .click() call registers a new click listener. .click()调用注册一个新的Click侦听器。 So the user presses the button once to register the click listener, and then presses it again to hide the paragraph. 因此，用户按下按钮一次以注册单击侦听器，然后再次按下按钮以隐藏段落。
Instead, just remove the onclick tag, and use the .click() listener, or vice versa. 相反，只需删除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>
解决方案2
0 2017-10-20 22:52:00
I'm adding some detail to this question... So, as you can see below, my small js file was loaded and the simple function works well on first click... Which brings back the original question, why JQuery behaves differently when loaded by Js code? 我正在为这个问题添加一些细节...因此，如您在下面看到的那样，我的小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>
解决方案3
0 2017-10-21 06:09:48
The solution to this issue was found a Stackoverflow question... 找到此问题的解决方案Stackoverflow问题...
enter link description here 在此处输入链接说明
And this is the code that solves the problem.. 这是解决问题的代码。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.