Mathjax 未呈现 jquery 方程

Question

我在此处链接了代码 ->https://jsfiddle.net/jw7g21p4/4/ 但它没有像我希望的那样工作。

我在 html header 中链接了两个 MathJAX 脚本，其中一个来自 MathJAX 网站（目前已注释掉）并且应该提供最新版本。另一个是我在别人的 post 上找到的，是 MathJax 的旧版本。来自 MathJAX 的脚本在输入值更新时不会呈现，但它在更改值之前看起来更好。第二个脚本在输入值更新时执行 re-renders 但渲染看起来不太好。

尝试使用下面的两个脚本进行测试 - 注意 sqrt 符号。

关于让 MathJAX 脚本库像第二个脚本那样在输入值变化时 re-render 有什么建议吗？

  $(document).ready(function (e) {
    $('#d_i').on('input', function () {
      calculate();
    });

    $('#phi_v_w').on('input', function () {
      calculate();
    });

    $('#e').on('input', function () {
      calculate();
    });

    function calculate() {
      var n1 = parseFloat($('#d_i').val());
      var n2 = parseFloat($('#phi_v_w').val());
      var n3 = parseFloat($('#e').val());
      var a4 = "";
          a4 = ((2*n1*n2) /Math.sqrt(1 + Math.pow((6 * n3) / n1,2))).toFixed(2) ;
      
      $('#V_a').html(
        "$$\begin{aligned}" + 
        "V_a &= { {2 \cdot d_i \cdot \phi v_w} \over { \sqrt{ 1 + \Large \left[ {6 \cdot e} \over { d_i } \right]^2 }}} " +
        "\" +
        ("\ &= { {2 \cdot d_i \cdot \phi v_w} \over { \sqrt{ 1 + \Large \left[ {6 \cdot XE} \over { d_i } \right]^2 }}}").replaceAll("d_i",n1).replaceAll("\phi v_w",n2).replaceAll("XE",n3) +
        "\" +
        "\ V_a &= "+ a4 +" \ kN" +
        "\end{aligned}$$"
      )

     
      MathJax.Hub.Queue(["Typeset",MathJax.Hub,'V_a']);

    };

    calculate();
  });

<html>

<head>
  <title>JS + MathJax TeX Test Page</title>
  
  <!-- <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script> -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <main>
        <section class="main">
      <p>


                <table class="parameter">
                    <tr>
                        <th>Parameter Name</th>
                        <th>Symbol</th>
                        <th>Value</th>
                        <th>Units</th>
                    </tr>
                    <tr>
                        <td>Plate height</td>
                        <td>\( d_i \)</td>
                        <td class="input"><input type='text' id="d_i" /></td>
                        <td>\( mm \)</td>
                    </tr>
                    <tr>
                        <td>Design capacity of weld per unit length</td>
                        <td>\( \phi v_w \)</td>
                        <td class="input"><input type='text' id="phi_v_w" /></td>
                        <td>\( kN/mm \)</td>
                    </tr>

                    <tr>
                        <td>Load Eccentricity</td>
                        <td>\( e \)</td>
                        <td class="input"><input type='text' id="e" /></td>
                        <td>\( mm \)</td>
                    </tr>

                </table>
    </section>
    <br>

      <section class="math">
        <div class="math" id="V_a">         </div>

      </section>

  </main>
</body>

</html>

Answer 1

我意识到我需要替换行：“MathJax.Hub.Queue(["Typeset",MathJax.Hub,'V_a']);"在我的 jQuery 中使用“MathJax.typeset()” 版本 3.x.x+ MathJAX.

Answer 2

您可能想使用

MathJax.startup.document.clearMathItemsWithin(['#V_a']);
MathJax.typeset(['#V_a']);

为了避免累积指向不再出现在页面上的旧版本方程式的指针，并且只排版更新数学的容器而不是整个文档。

Mathjax 未呈现 jquery 方程

Mathjax not rendering jquery equation

jquery

mathjax