jQueryAce 不能在隐藏的 div 中工作

Question

我的网站上有一个选项卡式内容，其中一个选项卡需要包含 jQueryAce 编辑器。我正在按照他们的 website 上的示例进行操作，如下所示:

<textarea class="my-code-area" rows="4" style="width: 100%">puts 'foo'</textarea>
<script>
$('.my-code-area').ace({ theme: 'twilight', lang: 'ruby' })
</script>

这些行应该位于一个 div 中，该 div 最初具有 display: none，直到用户单击选项卡名称。如果它们在那个 div 里面，当它显示时，编辑器将不可见(也不会工作)，但是如果这些行在隐藏的 div 外面然后编辑器工作得很好。

关于如何将此编辑器放入最初隐藏的 div 中的任何建议？

Answer 1

然后你应该在显示主 div 之后初始化你的插件，

$('your-div').show();
$('.my-code-area').ace({theme:'twilight',lang:'ruby'}); // add after showing parent div