javascript - 动态附加脚本失败

Question

我试图在单击时或在设置超时后插入脚本(如下所示)，但它没有附加。但是，如果我删除 setTimeout 函数，它会追加。单击或任何其他事件也会发生同样的情况。谁能告诉我原因，以及我如何才能做到这一点？

 setTimeout(function(){
    var parent = $('#panel');                   
    var element = $('<div></div>');
    var script = document.createElement('script');
    script.setAttribute('type','math/tex');
    script.textContent = 'e^{\\pi i} + 1 = 0';
    element.append(script); 

    parent.append(element);
}, 1500);

Answer 1

编辑:如果您正在使用 MathJax，您需要告诉 MathJax 在 1.5 秒后插入这个标签后重新扫描页面以查找新的 latex 标签，请参阅 http://docs.mathjax.org/en/latest/typeset.html通常你只需运行 MathJax.Hub.Queue(["Typeset",MathJax.Hub]); 就可以逃脱，这对你来说意味着:

setTimeout(function(){
    var parent = $('#panel');                   
    var element = $('<div></div>');
    var script = document.createElement('script');
    script.setAttribute('type','math/tex');
    script.textContent = 'e^{\\pi i} + 1 = 0';
    element.append(script);
    parent.append(element);
    MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}, 1500);

原始答案:它在我的 jsfiddle 中有效:

https://jsfiddle.net/aLe0jL3y/

我怀疑你相信一旦你附加了这个脚本标签，你的 latex 库就会自动检测到它被插入并解析它或其他东西。

我不知道您使用的是哪个库用于 latex ，但我猜您的代码在 setTimeout 之外工作，因为它是在 latex 库扫描页面之前插入的math/tex 脚本标签，而当您使用 1.5 秒延迟时，库将已经运行，因此您的脚本标签 is 被插入但您看不到它，因为 latex 库已经运行到这个时间点，所以它不会解析它。

我建议确保使用的 latex 库在 1.5 秒后运行。