Javascript 如何在使用driver.js创建的弹出窗口上使用MathJax？
我使用生成弹出框来显示页面。虽然MathJax正在为基本元素工作，但我不知道如何在Popover上使用它。我遵循并尝试在生成popover时重新运行MathJax，但我无法使其工作 下面是一个描述问题的小示例：Javascript 如何在使用driver.js创建的弹出窗口上使用MathJax？,javascript,mathjax,Javascript,Mathjax,我使用生成弹出框来显示页面。虽然MathJax正在为基本元素工作，但我不知道如何在Popover上使用它。我遵循并尝试在生成popover时重新运行MathJax，但我无法使其工作 下面是一个描述问题的小示例： 当\（a\ne 0\）时，有两种解决方案\（ax^2+bx+c=0\），它们是\[x={-b\pm\sqrt{b^2-4ac}\over 2a}.\] 单击以显示弹出窗口 //定义popover 常量驱动程序=新驱动程序（）； 驱动程序定义([ { 元素：'#btn'， 流行音乐：
当\（a\ne 0\）时，有两种解决方案\（ax^2+bx+c=0\），它们是\[x={-b\pm\sqrt{b^2-4ac}\over 2a}.\]
单击以显示弹出窗口
//定义popover
常量驱动程序=新驱动程序（）；
驱动程序定义([
{
元素：'#btn'，
流行音乐：{
标题：“测试MathJax”，
描述：“当\（a\ne 0\）时，有两种解决方案\（ax^2+bx+c=0\）是\[x={-b\pm\sqrt{b^2-4ac}\over 2a}.\]'，
位置：'底部'
}
}
]);
设btn=document.querySelector（'#btn'）；
//单击按钮时，应显示popover，并且应重新运行MathJax，以便正确显示popover中的数学
btn.addEventListener（'click'，function（）{
driver.start（）；
Queue（[“Typeset”，MathJax.Hub，“driver popover item”]）；
});
driver.js<!DOCTYPE html>
<html lang="en">
<head>
<!-- Files for MathJax -->
<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>
<!-- Files for driver.js -->
<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
</head>
<body>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>
<button id="btn">Click to show popover</button>
<script>
// Define the popover
const driver = new Driver();
driver.defineSteps([
{
element: '#btn',
popover: {
title: 'Test MathJax',
description: 'When \\(a \\ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are \\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]',
position: 'bottom'
}
}
]);
let btn = document.querySelector('#btn');
// When button is clicked, popover should appear and MathJax should re-run so that the math in the popover is correctly displayed
btn.addEventListener('click', function(){
driver.start();
// MathJax.Hub.Typeset(document.querySelector(".driver-popover-description"));
setTimeout(function() {
MathJax.typeset();
}, 1000);
});
</script>
</body>
</html>
当\（a\ne 0\）时，有两种解决方案\（ax^2+bx+c=0\），它们是\[x={-b\pm\sqrt{b^2-4ac}\over 2a}.\]
单击以显示弹出窗口
//定义popover
常量驱动程序=新驱动程序（）；
驱动程序定义([
{
元素：'#btn'，
流行音乐：{
标题：“测试MathJax”，
描述：“当\\（a\\ne 0\\）时，有两种解决方案\\（ax^2+bx+c=0\\），它们是\\[x={-b\\pm\\sqrt{b^2-4ac}\\over 2a}.\\]'，
位置：'底部'
}
}
]);
设btn=document.querySelector（'#btn'）；
//单击按钮时，应显示popover，并且应重新运行MathJax，以便正确显示popover中的数学
btn.addEventListener（'click'，function（）{
driver.start（）；
//Typeset（document.querySelector（“.driver popover description”）；
setTimeout（函数（）{
typeset（）；
}, 1000);
});
driver.jsonHighlighted<!DOCTYPE html>
<html lang="en">
<head>
<!-- Files for MathJax -->
<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>
<!-- Files for driver.js -->
<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
</head>
<body>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>
<button id="btn">Click to show popover</button>
<p id = "test2">Some text</p>
<script>
const driver = new Driver({
onHighlighted: () => {
setTimeout(function() {
MathJax.typeset();
}, 400);
}
});
driver.defineSteps([
{
element: '#btn',
popover: {
title: 'Test MathJax',
description: '\\(a \\ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are \\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]',
position: 'bottom'
}
},
{
element: '#test2',
popover: {
title: 'Test MathJax',
description: '\\(a \\ne 0\\)',
position: 'bottom'
}
}
]);
let btn = document.querySelector('#btn');
btn.addEventListener('click', function(){
driver.start();
});
</script>
</body>
</html>
当\（a\ne 0\）时，有两种解决方案\（ax^2+bx+c=0\），它们是\[x={-b\pm\sqrt{b^2-4ac}\over 2a}.\]
单击以显示弹出窗口
一些文本
常量驱动程序=新驱动程序({
突出显示：（）=>{
setTimeout（函数（）{
typeset（）；
}, 400);
}
});
驱动程序定义([
{
元素：'#btn'，
流行音乐：{
标题：“测试MathJax”，
描述：“\\（a\\ne 0\”，有两种解决方案\\（ax^2+bx+c=0\\），它们是\\[x={-b\\pm\\sqrt{b^2-4ac}\\over 2a}.\\]”，
位置：'底部'
}
},
{
元素：'#test2'，
流行音乐：{
标题：“测试MathJax”，
描述：“\\（a\\ne 0\\）”，
位置：'底部'
}
}
]);
设btn=document.querySelector（'#btn'）；
btn.addEventListener（'click'，function（）{
driver.start（）；
});
注意：我将延迟设置为400毫秒，因为如果我输入一个较低的值，MathJax应用得太快（在弹出窗口的内容出现之前），因此不会修改内容。此值可能会为您更改（我尝试了多次查找）。您是否尝试了MathJax.Hub.Typeset（容器）来重新运行MathJax？我只是尝试替换
MathJax.Hub.Queue（[“Typeset”，MathJax.Hub，“driver popover item]”）MathJax.Hub.Typeset（“驱动程序弹出项”）