Para facilitar la explicación de mi problema, he creado un pequeño ejemplo:
Digamos que tenemos este sitio web simple ( index.html ):
<!DOCTYPE html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <body> <script id="navigation" src="nav.js"></script> <p>Amazing website content</p> <script src="something.js"></script> </body> </html> Digamos que el script nav.js importa nuestra barra de navegación desde un nav.html a nuestro index.html , por lo que el script se vería así:
fetch('nav.html') .then(res => res.text()) .then(text => { let oldE = document.querySelector("script#navigation"); let newE = document.createElement("div"); newE.innerHTML = text; oldE.parentNode.replaceChild(newE,oldE); }) y por motivos de simplicidad, nuestra "barra de navegación" ( nav.html ) se ve así:
<ul class="class-nav"> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> Finalmente, tenemos something.js , que es un javascript que usa jQuery para hacer algunas cosas, por ahora, solo queremos poder imprimir elementos con el nombre class-nav :
jQuery(document).ready(function($) { "use strict"; var magic = function() { $('.class-nav').each(function() { console.log(this); }); }; magic(); }); Si codifiqué mi barra de navegación ( nav.html ) a la página web ( index.html ), la función magic() en something.js (que usa jQuery ) funciona y puede imprimir la barra de navegación class-nav .
Sin embargo, si lo tenemos en la configuración actual, donde tenemos nuestra barra de navegación agregada a la página web desde un archivo nav.html separado, la función magic() no puede encontrar class-nav .
¿Por qué? ¿Y cómo puedo modificar something.js para poder recuperar class-nav usando jQuery?