Creé un solo navbar.html y lo incluí en todas las páginas de mi sitio web.j El css funciona bien, pero javascript no puede seleccionar elementos de esa barra de navegación.
barra de navegación.html:
<nav class="navbar"> <h1> This is a navbar </h1> </nav>index.html donde se reemplaza con un marcador de posición:
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> <div class="nav-placeholder"></div> <script src="app.js"></script> </body> </html>app.js que está reemplazando la barra de navegación e implementando una función de prueba:
$(function(){ $(".nav-placeholder").load("nav.html"); }); document.querySelector('.navbar').addEventListener('click', function(){ alert('clicked'); })Está intentando vincular su detector de eventos antes de que la función de carga haya insertado los datos en el DOM.
Utilice la delegación de eventos o traslade el trabajo de vincular el detector de eventos a una función de devolución de llamada que pase como segundo argumento al método de load .