Javascript charge dynamiquement la bibliothèque jQuery

Pourquoi deux clicks sur le bouton pour faire fonctionner ce code jQuery? Le navigateur charge ce fichier et onload le tag de script est présent dans la section head. Mais ce code ne fonctionne qu'après 2 clics.Javascript charge dynamiquement la bibliothèque 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>

Source

2017-10-20 George Lemonde

Avez-vous déboguer votre code? Définissez un point d'arrêt sur la première ligne de j1(). –

Je n'ai pas de débogueur pour JS, mais je l'ai vérifié très minutieusement. Je l'exécutais aussi et l'inspectais avec Chrome "inspect". –

J'ai été capable d'ajouter dynamiquement le JQuery au ou au HTML (vu sur le navigateur inspecter) mais il faut deux appels à J1() pour que le JQuery fasse le travail. BTW, placer un appel à J1() à l'intérieur de load1() ne fonctionnait pas non plus. –

L'appel .click() enregistre un nouvel écouteur de clics. Ainsi, l'utilisateur appuie une fois sur le bouton pour enregistrer l'écouteur de clic, puis l'appuie à nouveau pour masquer le paragraphe. Au lieu de cela, il suffit de supprimer la balise onclick et d'utiliser l'écouteur .click(), ou 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>

Source

2017-10-20 19:17:47

Salut Derek, merci pour votre réponse ... Peut-être que j'ai manqué un élément important dans ma question ... Le but est de charger dynamiquement la bibliothèque JQuery ... Comme une sauvegarde lorsque le CDN n'est pas disponible ... Et je ne pouvais pas t trouver un moyen de faire exécuter le code JQuery juste après onload .... J'espère que quelqu'un connaîtra la réponse ... Merci encore ... –

Je suis d'ajouter des détails à cette question ... Donc, comme vous pouvez le voir ci-dessous, mon petit fichier js a été chargé et la fonction simple fonctionne bien sur le premier clic .. Qui ramène la question originale, pourquoi JQuery se comporte différemment lorsqu'il est chargé par le code 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>

Source

2017-10-20 22:52:00

La solution à ce problème a été trouvé une question Stackoverflow ...

enter link description here

Et voici le code qui permet de résoudre le problème ..

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

Source

2017-10-21 06:09:48

Javascript charge dynamiquement la bibliothèque jQuery

Répondre

Questions connexes