javascript - jQuery width() 未在具有生成内容的 div 上返回正确的值

Question

使用下面的代码，警报不会返回#main的实际大小，它总是返回#main的css宽度值，并删除%。所以在这种情况下，我在警报中得到 95。如果我警告parent().width()，我会得到100。

从 .get() 调用返回的数据是一个 ul，有时比 #main 宽，有时则不是。内容的宽度似乎与 .width() 返回的内容没有任何关系。

所以我的问题是，如何获得#main的真实像素宽度？

CSS:

#container {
    width: 100%;
}

#main {
    width: 95%;
    overflow: hidden; 
}

HTML:

<div id="conatiner">
    <div id="main"></div>
</div>

Javascript/jQuery:

$.get('page.php', function(result) {
    $('#main').html(result);
});
alert($('#main').width();

Answer 1

我在尝试实现 jquery.autogrow-textarea 时遇到了同样的问题用于内联编辑的文本区域。文本区域包含在尚未显示的 div 中(css display: none;)。在调试 .autogrow() javascript 代码时，我发现 jQuery 的 .width() 返回的是删除了“%”字符的百分比值，而不是计算出的宽度以像素为单位(例如 100 代表 100%，80 代表 80%)。

下面是演示此场景的 jsfiddle:http://jsfiddle.net/leeives/ujE6s/

为了解决这个问题，我在显示文本区域后立即将代码更改为 .autogrow() 。对 .width() 的调用是准确的。

我不确定您是否正在使用隐藏内容，但我想我会写下我的答案，以防其他人在搜索 jQuery 的 问题时偶然发现这一点(就像我一样)。宽度()。