jQuery outerHeight() 即使使用 jQuery(window).load() 也会返回 0答案

【问题标题】：jQuery outerHeight() returns 0 even with jQuery(window).load()jQuery outerHeight() 即使使用 jQuery(window).load() 也会返回 0
【发布时间】：2013-11-07 17:54:38
【问题描述】：

在我使用 ajax 加载内容后，我想获取加载元素的 outerHeight。

Ajax 加载文件：

$('#workshop').submit(function(event){



        $.ajax({
        url: URL,
        type: 'POST',
        data: $('#workshop').serialize(),
        success: function(data){

            var string = '<div class="section" id="result"></div>';

            if(prevent == true){
                 $('#container #result').html($("#main .inside>.mod_article", data));

                 $.getScript( scriptURL, function() {
                        });
            }else{
                $('#container').append(string);
                $('#container #result').html($("#main .inside>.mod_article", data));


                    $.getScript( scriptURL, function() {
                        });


                prevent = true;

            }

    });
        event.preventDefault();
});

加载的脚本如下所示：

var height;
var top ;

function scroll_down(){

jQuery(window).load(function(){
    $('.result_control .up').css({'display' : 'block'});

    top = $('.item_wrapper>.inner').css('top');
     height =  $('.item_wrapper>.inner>.item').outerHeight(true);

});

console.log(top);
console.log(height);

}


function scroll_up(){
console.log('up');
}

$('.item_wrapper').mousewheel(function(event, delta, deltaX, deltaY){
if(delta > 0){
    scroll_up();
}else if(delta < 0){
    scroll_down();
}
 });

加载元素的 HTML：

<div class="item_wrapper">
  <div class="inner">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

这些元素的css代码：

.section#result .workshopfilter .filterresult .item_wrapper {
overflow: hidden;
width: 100%;
height: 65%;
position: relative;
clear: both !important;
}
.section#result .workshopfilter .filterresult .inner {
position: absolute;
top: 0px;
width: 100%;
clear: both !important;
 }
.section#result .workshopfilter .filterresult div.item {
float: left;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 2%; 
width: 27%;
background-color: #ffff00;
color: #333;
height: 250px;
padding: 2%;
position: relative;
display: block;
font-family:'AmericanTypwrterITCW01- 731031';
}

.css() 返回对象

.outerHeight 返回 0

元素可见并显示：块。我不知道如何修复它以获得正确的属性。

【问题讨论】：

你能给我们一个包含 .item_wrapper 容器的 html 示例吗？
您确认您的$('.item_wrapper>.inner>.item') 代码实际上选择了一个元素吗？
@OlivierH 我编辑了我的问题，请参阅上面的 html 代码。
@RichPeck 如果我对此执行 console.log() 它将返回所有 div.item 我也尝试使用 .first() 因为“$('.item_wrapper 上有多个匹配的元素>.inner>.item')" 选择器
直接输入会返回什么 $('.item_wrapper>.inner>.item').outerHeight(true);进入浏览器的 javascript 控制台？当然是在提交您的#workshop 表单之后

标签： javascript jquery ajax outerheight

【解决方案1】：

因为 ajax 是异步的。您需要在load () 的回调函数中指定变量，在您的情况下它在外部

 jQuery(window).load(function(){
    $('.result_control .up').css({'display' : 'block'});
    top = $('.item_wrapper>.inner').css('top');
    height =  $('.item_wrapper>.inner>.item').outerHeight;

    console.log(top);  //here
    console.log(height); //here

});

因为你在加载回调函数之外有你的 console.log。console.log 在 load 完成之前被调用，因此什么都不给你

【讨论】：

这并没有解决我的问题，仍然返回 0 我认为问题不是由于我请求元素的 outerHeight 时未加载元素引起的。我正在阅读很多针对同样问题的可能修复方法，但没有任何效果。