jQuery .append（）添加无量纲元素，仅出现在窗口大小调整上

Question

我正在尝试添加onfocus元素并将它们移到onfocusout / onblur上。

模式是：
- 在第一个onfocus事件中，元素被添加并可见，它们被移除onfocusout / onblur没有问题
- 在第一个onfocus事件之后，元素在DOM中添加 但是无量纲，直到窗口调整大小，然后元素重新获得它们的维度。

我在jsfiddle中写了完全相同的代码，有趣的是，无法复制问题。它在小提琴中完美地运作。

项目很复杂，并且有许多jquery函数，所以我无法在小提琴上复制整个体验。

有什么可以导致这个的想法吗？ DOM中的所有内容在工作和不工作的版本之间完全相同，它们只是以不同的方式呈现，我不确切地知道它是如何形成的。

HTML代码：

<textarea class="starter_comment" rows="1" placeholder="leave a comment.."></textarea>

jQuery代码：

$('.starter_comment').focus(function () {

    if ($(this).attr("status") !== "open") {
        $(this).attr("status", "open");
        $(this).attr("rows", 5);
        $(this).parent().append("<button type='submit'>Submit</button><span class='cancel_comment' onclick='cancel_comment();'>Cancel</span>");

    }
});

$('.starter_comment').focusout(function () {
    $('.starter_comment').attr("status", "closed");
    $('.starter_comment').attr("rows", 1);
    $('.cancel_comment').remove();
    $('button').remove();

});