title: Inserting MathJax into ContentEditable div
body: <p>I am trying to insert some MathJax code into a contentEditable div, like so:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;meta charset=utf-8 /&gt;
    &lt;script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"&gt;      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="editor" contentEditable="true" style="width:400px;height:400px;"&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>
     </p>
  
  <p>and the JS</p>
  
  <pre><code>$(document).ready(function () {
  
    $('#editor').focus();
  
    var code = "\\alpha";
  
    var html = '&lt;span id="_math"&gt;&lt;script type="math/tex;mode=in-line"&gt;'+ code +'&lt;/script&gt;&lt;/span&gt;';
  
    document.execCommand('insertHTML', false, html);
  
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, '_math']);
  
  });
  </code></pre>
  
  <p>Which renders OK, but once this is inserted, the element freezes and further input is not possible. Can someone point out the problem here.</p>