jQuery script working after the DOM has loaded within a .click event?

Question

Hi, I am trying to find out how to get a jQuery script to work correctly when a click event is started, the script calculates the height of a container (this script appears at the start of the page on load and works 100%) but I am now trying to get it to work inside a .click event.

If anyone knows how I should achieve this I would be very grateful.

p.s. I have tried doing document ready; waiting for the DOM to load but no cigar.

$(document).ready(function() {
    $("#hidden4").click(function(event) {
        event.preventDefault();
        $("#hidden4-1").slideToggle();

        var classDown = $('#hidden4 div.down').attr('class');
        var classUp = $('#hidden4 div.up').attr('class');

        if(classDown == 'down') {
            $("#hidden4 div.down").attr("class","up");
        }
        else if(classUp == 'up') {
            $("#hidden4 div.up").attr("class","down"); 
        }
            // Attain the absolute height of the container id container and assign to a usable variable
            var height = $("#container").height();
            alert (height);
            // Use the previous variable, divide by 4 then round that up and multiply by 4 and assign to new variable
            var newHeight = Math.ceil(height / 4) * 4;

            // Create a new variable and add the string "center" to it
            var finalHeight = "center ";

            // Using the previous variable add to it using the first 2 variables subtracting to find the difference and add 2
            finalHeight += (newHeight - height)+2;

            // Using the previous variable add to it the string "px" for the css selector usage
            finalHeight += "px";

            // Update the CSS of the required element altering the background position with the final variable
            $(".contentFooter").css('background-position', finalHeight);
    });
});

Thank you in advance.

Answer 1

I don't think you need to nest another $(document).ready() in a jquery click, since the DOM is already ready when you applied the click event.