Estoy tratando de hacer un sitio web donde al presionar un botón se cargue una fórmula escrita en látex en un archivo html diferente en mi archivo html actual. Pero cuando hago esto, solo obtengo el código de látex y no la fórmula. He intentado usar MathJax.typeset() pero no funciona. A veces funciona durante una fracción de segundo cuando presiono constantemente el botón, pero vuelve al látex inmediatamente después. Este es el archivo principal llamado index.html. He usado jquery para cargar el archivo solo porque es más fácil.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <title>index</title> </head> <body> <button onclick="loadHTML('test1.html')">Press for formula</button> <div id="content" class="content">Formulas coming here</div> </body> </html> <script> function loadHTML(filename){ let file = `formulas/${filename}` $("#content").load(file); MathJax.typeset(); }; </script>y el archivo test1.html que incluye la fórmula (dentro de una carpeta que he llamado "fórmula")
$$a = {b \over c}$$La función jQuery load() es asíncrona, por lo que aunque se completa y pasa a la siguiente línea de su código, eso no significa que el archivo se haya cargado realmente, por lo que está llamando a MathJax.typeset() antes del nuevo contenido. esta en la pagina Puede pasar una función de devolución de llamada a load() que se llama cuando se actualiza la página. Úsalo para llamar a MathJax.typeset() :
function loadHTML(filename){ let file = `formulas/${filename}` $("#content").load(file, function () { MathJax.typeset(); }); };