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>

Did you debug your code? Set a breakpoint on the first line in j1(). — Jeroen Heier, Oct 20 '17 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, Oct 20 '17 at 19:38
I was able to add the JQuery dynamically to the 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, Oct 20 '17 at 19:42

score 2 · Answer 1 · answered Oct 20 '17 at 19:17

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>

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... — George Lemonde, Oct 20 '17 at 19:36

score 0 · Answer 2 · answered Oct 20 '17 at 22:52

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>

score 0 · Answer 3 · answered Oct 21 '17 at 06:09

The solution to this issue was found a Stackoverflow question...

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>

Javascript loading jQuery library dynamically

3 Answers3