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>
CDspace
2,69919 gold badges32 silver badges39 bronze badges
-
Did you debug your code? Set a breakpoint on the first line in j1().Jeroen Heier– Jeroen Heier2017年10月20日 19:30:36 +00:00Commented Oct 20, 2017 at 19:30
-
I don't have a debugger for JS, but I checked It very thoroughly. I was also running it and inspecting it with Chrome "inspect".George Lemonde– George Lemonde2017年10月20日 19:38:53 +00:00Commented Oct 20, 2017 at 19:38
-
I was able to add the JQuery dynamically to the <head> or the HTML (seen on browser inspect) but It takes two calls to J1() to get the JQuery to do the work. BTW, placing a call to J1() inside load1() also didn't work.George Lemonde– George Lemonde2017年10月20日 19:42:44 +00:00Commented Oct 20, 2017 at 19:42
3 Answers 3
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>
answered Oct 20, 2017 at 19:17
Derek Brown
4,4575 gold badges30 silver badges44 bronze badges
Sign up to request clarification or add additional context in comments.
1 Comment
George Lemonde
Hi Derek, thanks for your reply... Perhaps I missed an important item in my question... The goal is to load JQuery library dynamically... As a backup when the CDN is not available... And I couldn't find a way to make the JQuery code run right after onload.... I hope someone will know the answer... Thanks again...
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>
Comments
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>
Comments
lang-js