innerHTML aparece y luego desaparece rápidamente en menos de un segundo, div en un archivo de carga jquery.
principal.js
$(document).ready(function () { $('#page1').click(function () { $('#page-content-wrapper').load('page1.html'); document.getElementById("changeme").innerHTML = "Paragraph changed!"; }) });índice.html
<!DOCTYPE html> <html> <head> <script src="js/site.js"></script> <meta charset="utf-8" /> <title>TimeApp</title> </head> <body> <a id="page1">Page 1</span></a> <a id="page2">Page 2</span></a> <div id="page-content-wrapper"> <!-- Page content is loaded here --> </div> </body> </html>pagina1.html
<div id="changeme"></div>El problema se debe a que load() realiza una solicitud AJAX para recuperar el contenido de page1.html. Mientras esto sucede, actualiza el innerHTML interno del elemento dentro del #page-content-wrapper . Cuando se completa la solicitud de AJAX, el contenido de page1.html sobrescribe el contenido existente, que acaba de actualizar.
Para solucionar el problema, coloque la línea que actualiza el texto del elemento en la devolución de llamada de load() , para que solo se ejecute después de la solicitud AJAX:
jQuery($ => { $('#page1').click(function() { $('#page-content-wrapper').load('page1.html', () => { $("#changeme").text("Paragraph changed!"); }); }); });Mejor aún, coloque el contenido que necesita en page1.html directamente, para evitar este código innecesario.