无法获得div宽度/高度

I found a good example of simple how to display a pop up near a click: http://roshanbh.com.np/examples/popup-message/

我找到了一个很简单的例子,如何在点击附近显示弹出窗口:http://roshanbh.com.np/examples/popup-message/

I'm leveraging this for my button click, but I can't seem to get an actual width or height of the element and I'm not entirely sure why:

我正在利用这个按钮点击,但我似乎无法获得元素的实际宽度或高度,我不完全确定原因:

function BindObject(o)
{
    o.click(function(e)
    {
        var editor = $(this).find(".object_editor");

        console.log(editor);
        console.log(editor.height());
    });
}

Here is what is printed to the console: 无法获得div宽度/高度

这是打印到控制台的内容:

(FYI only, BindObject is called on document ready, I am using jqote as well, not sure how relevant that is, it might be)

(仅供参考,BindObject在文档就绪时调用,我也使用jqote,不确定它是多么相关,可能是)

 $("#QuestContent").html($("#QuestTemplate").jqote(quest_data));
 $("#QuestContent").find(".object").each(function() {
    BindObject($(this));
 });

It obviously finds the element (represented by editor), but I'm unable to determine it's width or height. I do know that display is set to none, but that's because I don't want to display it until someone clicks a button to display the pop up. Anyone have any ideas why it's always null?

它显然找到了元素(由编辑器表示),但我无法确定它的宽度或高度。我知道显示设置为none,但那是因为我不想显示它,直到有人点击按钮显示弹出窗口。任何人都有任何想法为什么它总是空?

Here is the css:

这是css:

.object_editor{
    position:absolute;
    z-index:10;   
    width:172px;
    height:102px;
    text-align:center;
    color:#FFFFFF;
    font: 14px Verdana, Arial, Helvetica, sans-serif;
    background-color:#000000;
    display:none;
}

Edit: And the relevant jqote just in case it's needed:

编辑:以及相关的jqote以防万一它需要:

<!-- Object Template -->
<script type="text/x-jqote-template" id="ObjectTemplate">
    <![CDATA[
        <span class="object <%= (this.hidden ? "hiddenType" : "") %>">&nbsp;
            <input class="objectType" type="hidden" name="<%= this.key[0] %>" value="<%= this.type %>">
            <input class="objectEntry" type="hidden" name="<%= this.key[1] %>" value="<%= this.entry %>">
            <a data-emptytext="<%= object_types[this.type] %>" data-name="<%= this.key[1] %>" target="_blank" href="<%= (this.entry? whUrl(this.type, this.entry) : "#") %>" class="objectName"><%= this.name %><%= (this.entry?" ("+this.entry+")":"") %></a>&nbsp;<i class="icon-edit editObject"></i>
            &nbsp;
            <% if(this.remove) { %>
                <a href=".object" class="deleteParent"><i class="icon-trash"></i></a>
            <% } %>
        </span>

        <!-- Insert our Editor -->
        <%=$("#ObjectEditorTemplate").jqote({type: this.type, entry:this.entry}) %>
    ]]>
</script>

<!-- Object Editor Template -->
<script type="text/x-jqote-template" id="ObjectEditorTemplate">
    <![CDATA[
        <div class="object_editor">My Editor: <%= this.entry %></div>
    ]]>
</script>

2 个解决方案

#1

The reason is because display is set to none. See this for a similar question.

原因是因为display设置为none。请参阅此类似问题。

#2

try this
$('divID').css('width');
similarly for height

试试这个$('divID')。css('width');同样的高度

#1