jQuery outerHeight() returns 0 even with jQuery(window).load()

Question

After i loaded content with ajax i wanna get the outerHeight of the loaded elements.

Ajaxload file:

$('#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();
});

The script loaded looks like :

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();
}
 });

The HTML of the loaded elements :

<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>

The css code of these elements :

.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() returns object

.outerHeight returns 0

The elements are visible and displayed:block. I dont know how to fix it to get the right properties.

Answer 1

since ajax is async. you need to specify the variables inside the callback function of load () which in you case is outside

 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

});

since you have your console.log outside the load callback function.. console.log is called before the load completes hence giving you nothing