JavaScript动态加载jQuery库

为什么需要点击两次按钮才能使jQuery代码工作？浏览器加载此文件，并加载脚本标记存在于头部分。但是这个代码只能在2次点击后才能使用。JavaScript动态加载jQuery库

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>

来源

2017-10-20 George Lemonde

难道您调试码？在j1（）的第一行设置一个断点。 –

我没有JS的调试器，但我非常彻底地检查它。我也在运行它，并用Chrome“检查”来检查它。 –

我能够动态地将JQuery添加到或HTML（在浏览器上查看），但需要两次调用J1（）才能让JQuery完成这项工作。顺便说一句，在load1（）内部调用J1（）也不起作用。 –

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

来源

2017-10-20 19:17:47

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

我加入了一些细节，这个问题......所以，你可以看到下面，我的小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>

来源

2017-10-20 22:52:00

解决这个问题被发现了一个问题，＃2 ...

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>

来源

2017-10-21 06:09:48

JavaScript动态加载jQuery库

回答

相关问题