Javascript loading jQuery library dynamically
Question
Why does it take two clicks on the button to make this jQuery code work? The browser loads this file and onload the script tag is present in the head section. But this code works only after 2 clicks.
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 answers
solution1
2 2017-10-20 19:17:47
The .click() call registers a new click listener. 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.
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>
solution2
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?
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>
solution3
0 2017-10-21 06:09:48
The solution to this issue was found a Stackoverflow question...
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.