Javascript动态加载jQuery库答案

【问题标题】：Javascript loading jQuery library dynamicallyJavascript动态加载jQuery库
【发布时间】：2018-04-02 00:35:50
【问题描述】：

为什么要让这个 jQuery 代码工作需要两次点击按钮？浏览器加载此文件并加载脚本标记存在于 head 部分。但是此代码仅在单击 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>

【问题讨论】：

你调试过你的代码吗？在 j1() 的第一行设置断点。
我没有 JS 的调试器，但我检查得很彻底。我也在运行它并使用 Chrome “inspect”对其进行检查。
我能够将 JQuery 动态添加到或 HTML（在浏览器检查中看到），但需要两次调用 J1() 才能让 JQuery 完成工作。顺便说一句，在 load1() 中调用 J1() 也不起作用。

标签： javascript jquery

【解决方案1】：

.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>

【讨论】：

嗨 Derek，感谢您的回复...也许我错过了我的问题中的一个重要项目...目标是动态加载 JQuery 库...作为 CDN 不可用时的备份...而且我找不到让 JQuery 代码在 onload 后立即运行的方法...希望有人知道答案...再次感谢...

【解决方案2】：

我正在为这个问题添加一些细节......所以，如下所示，我的小 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】：

这个问题的解决方法是在 Stackoverflow 问题上找到的...

enter link description here

这是解决问题的代码..

<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>

【讨论】：