Detect the Body's Height

Question

I have an Add More Attachments function. Every time I click the button, one more attachment shows up, which causes the page getting longer. I write a syntax to detect the body's height after the attachments show up, but somehow it doesn't work. Please help.

Live Code

HTML

<input type="file" /></div><button id="addNew">Add</button>

<div class="attachField"></div> 

JS

    var i=0;
    $('#addNew').click(
        function()
            {
                if( i < 10)
                {
                i++;
                $('.attachField').append( '<div class="attachFile"><input type="file" /></div>' );
                }

                $('body').on('load', function()
                    {
                        var bodyAfterClick = $(this).contents().height();
                        alert(bodyAfterClick);
                        $('body').height(bodyAfterClick);

                    });
    }); //end click

Answer 1

Is this what you wanted?

Body automatically gets longer when you add element to it. It's default behaviour when the element's height is not set.

I can't read the documentation right now but it's obvious that this works only on page load. Please read documentation more properly.

$('body').on('load', function())

Answer 2

as per you code i understand that you need to find the height of body when you append the input

Made some changes to your code

JS Fiddle

        var i = 0;
        $('#addNew').click(

        function () {
            if (i < 10) {
                i++;
                $('.attachField').append('<div class="attachFile"><input type="file" /></div>');

                a = $('body').height()
                console.log(a)
                alert(a)

            }


        }); //end click

Answer 3

First of all why are you explicitly setting height to the body by $('body').height(bodyAfterClick);?

If you have to detect body height, you can try this -

$(document).height() - $('body').offset().top;

Reference link - jQuery $("body").height() returns undefined