2012-12-22 3 views
4

Ceci est mon page HTML:Appel d'une fonction jquery dans la page principale à partir d'un fichier .js distinct.

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 

<script type="text/javascript" src="jquery-1.8.2.min.js"></script> 

<script type="text/javascript" src="myscript.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() { 
function closecontactform(){ 
alert("closing the form"); 
}; 
}); 
</script> 
</head> 
<body> 
<p id="elementname">Click me to call function</p> 
</body> 

Ceci est dans le fichier myscripts.js:

$(document).ready(function() { 
$('#elementname').click(function() { 
alert("click detected"); 
closecontactform(); 
}); 
}); 

Mes pages réelles sont un peu plus compliqué que cela et comprennent beaucoup de jquery mais est le problème de base montrant seulement le code nécessaire. Je veux être en mesure d'appeler une fonction à partir d'un fichier .js distinct, alors que la fonction est définie dans la page principale. Dans cette version simple basique j'ai essayé de supprimer le $ (document) .ready (function() ... et dans cet exemple simple cela aide cependant que j'aie besoin de cette ligne dans mes pages plus compliquées puisque le retirer semble casser tout le reste je vais sur.

vous verrez le « clic détecté » est appelée, mais la « fermeture de la forme » ne fonctionne pas.

Pouvez-vous me donner des pointeurs?

Merci,

Répondre

13

Vous avez un problème d'étendue. Vous n'avez pas besoin d'envelopper la fonction nommée dans $(document).ready().

Si elle est enveloppée dans ready, sa portée est seulement disponible dans cette fonction prête en raison de la fermeture dans la fonction.

Exemple:

$(document).ready(function() { 
    function doAlert() { 
     alert('foo'); 
    } 
    /* can call function since scope in same parent function*/ 
    doAlert(); 
}); 
/* function not in scope, is undefined here*/ 
doAlert(); 

Refactor si la fonction est disponible à l'échelle mondiale et fonctionnera si elle est appelée partout. Travaillera dans les deux cas ci-dessous:

function doAlert() { 
    alert('foo'); 
} 

$(document).ready(function() { 
    doAlert(); 
}); 
doAlert(); 

Autre remarque:

Beaucoup de gens craignent que les fonctions en utilisant les sélecteurs jQuery et méthodes doivent être enveloppés dans $(document).ready(). Les fonctions nommées en dehors de ready peuvent contenir tout le code jQuery ... mais ... elles doivent être appelées après que DOM soit prêt à être sûr que html existe

+0

Ok. C'était un problème de portée comme vous le dites, mais je ne pense pas que je pouvais supprimer mon $ (document) .ready() puisque ma fonction actuelle contient en fait un certain nombre de variables et jquery (et css) qui dépendent du html étant chargé. Donc ce que j'ai fait, c'est enlever tout le code de mon fichier .js séparé et le mettre dans le même $ (document) .ready() sur ma page principale. Cela a réglé le problème. – Maureen

+0

ok..J'ai essayé d'expliquer la partie du code jQuery ... vous pouvez probablement retirer les fonctions.Vous pouvez toujours appeler beaucoup de fonctions depuis 'ready' mais vous pouvez avoir' ready' dans différents fichiers accéder aux mêmes fonctions globales – charlietfl

+0

voir comment j'ai enveloppé $ (document) .ready autour de l'appel de la fonction qui est nommée en dehors de 'ready' . La fonction ne s'excurera pas jusqu'à ce qu'elle soit appelée .. indépendamment de l'endroit où vous le définissez – charlietfl

0

Avez-vous essayé de vous déplacer?

<script type="text/javascript" src="myscript.js"></script> 

sous le <body> -tag?

0

Tout d'abord, vous devez déplacer vos tags de script juste au-dessus de </body> marque. Deuxièmement, cela devrait fonctionner ci-dessus si vous venez de retirer le document prêt. Le problème est que vous avez défini votre fonction dans un sens de fermeture, c'est hors de portée. Votre fonction n'a pas besoin d'être dans un document prêt car elle ne sera déclenchée que lorsque l'autre document est prêt (ce qui signifie que le document est prêt).

+0

script en haut (tête) ou en bas (corps) n'affectera pas le problème de portée. Pas vraiment pertinent à publier ici – charlietfl

Questions connexes