2013-02-05 3 views
0

Si j'ai un bouton qui exécute le codeComment exécuter Javascript de HTML externe

$('#main').load('welcome.html');

et welcome.html j'ai un bouton qui exécute le code

$('#main').load('otherpage.html');

le Javascript n'est pas exécuté, que cette fonction soit sur le code HTML du fichier parent ou celui de l'enfant.

Comment puis-je obtenir une fonction Javascript à partir de fichiers HTML chargés en externe?

EDIT est ici un peu plus d'un échantillon ...

Page d'accueil:

<body> 
    <div id="main"></div> 
</body> 

<script> 
    document.onLoad(){ 
     $('#main').load('welcome.html'); 
    } 

    function show(file){ 
     $('#main').load(file+'.html'); 
    } 
</script> 

welcome.html page:

<a href="javascript:show(test)">Test</a> 

... mais lorsque le bouton de test est cliqué, test.html n'est pas chargé dans la div principale.

EDIT 2

Voici ce que l'état actuel est et ce que la question est - exactement.

I've uploaded the bones of the code to PasteBin.

Lorsque vous cliquez sur le bouton 'Grid', le contenu change et le pied de page change.

Cependant, le pied de page, qui a des URL en fonction de Javascript, arrive avec l'erreur:

Uncaught SyntaxError: Unexpected token ILLEGAL

... lorsque vous essayez d'accéder à la page 1i.html.

+0

Pourquoi n'utilisez-vous pas simplement la balise 'script'? – Shawn31313

+0

Je fais ... ces fonctions sont dans les balises 'script'. Le reste de mon Javascript fonctionne, j'essaye juste de faire un site d'une page avec des pages externes chargées qui contiennent également Javascript. La page d'accueil fonctionne, les autres ne le font pas lorsqu'ils sont chargés. – Ben

+0

Avez-vous des articles avec l'ID "principal" sur les deux pages? Avez-vous un échantillon plus complet auquel nous pouvons nous référer? – Offbeatmammal

Répondre

0

Il est important de comprendre que lors du chargement de script dans la page via AJAX que la page principale est déjà passée par document.ready. Ainsi, tout code que vous chargez sera immédiatement déclenché.

Si le code que vous chargez précède le code HTML qu'il référence, il ne le trouvera pas lorsqu'il se déclenchera.

Placer le code après le code html en page distante résoudra ce problème

0

Vérifiez jQuery.live() et jQuery.on().

Votre eventhandler est peut-être erroné. Lorsque vous importez un nouveau balisage via load() ou ajax(), vous devez initialiser les gestionnaires à partir du nouveau document. Le plus simple est d'utiliser jQuery.on ou jQuery.live() au lieu de jQuery.click().

$('MYBUTTON').live('click', function(){ 
    $('#main').load('your_url.html') 
}) 

ou d'utiliser la fonction de rappel pour (ré) initialiser l'événement des boutons.

Une meilleure solution est la suivante: Il suffit d'ajouter le target_url aux boutons rel attribut ...

<button rel="YOUR_URL.html">Open Page</button> 

$('button[rel]').live('click', function(){ 
    $('#main').load($(this).attr('rel')); 
}) 
1

Il y a une différence entre la variable test et 'test' la chaîne:

<a href="javascript:show(test)">Test</a> 

Probablement devrait être :

<a href="javascript:void show('test')">Test</a> 
+0

Merci pour votre réponse - s'il vous plaît voir la question mise à jour pour une répartition plus spécifique du problème! – Ben

Questions connexes