MathJaxとJQueryを使ってMathMLを挿入する

Question

最近、JQueryを使ってIntuitionistic/Constructiveロジック用のエディタを作ってアプリケーションでMathJaxを使用し始めました。私が直面している問題は、ページが読み込まれ、JQueryを使ってMathMLを注入すると、正しくレンダリングされないということです。ここでは、コード

<math display="block" id="mathml-derivation"> 
    <mrow class="beginning"> 
    </mrow> 
</math> 

だこれは、私は問題が何であるかかどうか分からないのjavascript

setTimeout(function() { 
      console.log("Started"); 
      var $frac = document.createElement('mfrac'); 
      $frac.innerHTML = '<mrow id="children' + parseInt(1) + '" class="conclusion">\ 
          <mrow>\ 
           <mi>b</mi>\ 
          </mrow>\ 
         </mrow>\ 
         <mrow class="assumption">\ 
          <mo>' + "\u22A2" + '</mo>\ 
          <mrow class="goal clickable">\ 
           <mi>a</mi>\ 
          </mrow>\ 
         </mrow>'; 
      $("#mathml-derivation").append($frac); 
      console.log($frac); 
      MathJax.Hub.Typeset("mathml-derivation"); 
     }, 1000); 

です。私がsetTimeout関数を持っているのは、ページがロードされてから少なくとも1秒間実行されることを確認するためです。すぐに、またはイベントを通してロードすると、MathMLは正しくレンダリングされません。私はStackOverflowのいくつかの他のポストに続き、それは '.Typeset'関数を使うと言われましたが、正しく動作していません。

最後に、私はChromeを使用して開発しており、互換性のためにMathJaxを使用しています。

Answer 1

jsfiddleの例にはいくつか問題があります。

タイムアウトを使用すると不安定な動作が発生するのは、MathJaxとjQueryコードが同期していないためです。 MathJaxは、jQueryコードが実行される前に完全にロードされている場合とロードされていない場合があります。だからあなたは競争に終わります。タイムアウトを低く設定すると、jQueryの部分が最初に実行され、ページ内の（まだMathJaxで処理されていない）MathMLが置き換えられます。 MathJaxが来て、DOMで見つかったものをレンダリングします。

タイムアウトを長くすると、MathJaxが最初に実行され、2番目の問題が発生します.MathJaxはDOMからソースMathMLを削除しますが、ソースからidをそのまま出力に保存します。これは、jQueryの部分が、MathJaxの（HTMLまたはSVG）出力にMathMLフラグメントを追加することで終了することを意味します。

今すぐMathJax.Hub.Typeset("mathml-derivation");（これは理想的ではありませんが、MathJaxのキューを使用する必要があります）では、新しい数学コンテンツのみがレンダリングされます。しかし、あなたのコードは、何かが変更されたことをMathJaxに知らせずに、単に出力をハックするだけです。したがって、普通のタイプセットをキューに入れても、その特定のノードには何も行われません。 MathJax.Hub.Queue(["Rerender", MathJax.Hub]);を使用してMathJAxに再レンダリングするよう依頼した場合、MathJaxによって内部的に使用されるソースではなく、出力にMathMLを追加するという2番目の問題のため、何の効果も見られません。

簡単に言えば、MathJaxとjQueryのやりとりを再設計する必要があります。非常に非同期であるため、MathJaxのキューイングメカニズムを使用することをお勧めします。 MathJax documentationには、ページ上の数学を更新する問題に対するいくつかのアプローチも記載されています。 "MathJaxのやり方"はtextメソッドを使ってソースを更新することですが、ほとんどの開発者は出力ノード全体を遅らせ、変更されたMathMLを挿入してtypesetをキューに入れます（DOMに新しい数学があるので）。

MathJaxはサブ式の変更にAPIを提供しないので、MathML式の状態を表す内部DOMノードを保持して変更してからそれをDOMにコピーして、ビジュアル出力を更新します。