JQuery function only works on browser refresh
<p>The problem i am having with me JQuery function is that it only works when i refresh the webpage, it is working this way on every browser. What i am trying to do is once all of the textfields in enclosed in a specific div container all have data inside them, i want the the container to insert the checkmark image. but currently this image only becomes visible after i have entered all of the data in the textfields AND refreshed the brower. </p>

<p>.rightbilling is the class of the div container whose textfields im trying to evalute and '#step1' is the fieldset that contains .rightbilling. </p>

<p>I have been trying to solve this for hours..help is greatly appreciated. if you need more info, let me know.</p>

<pre><code>$(document.body).ready(function() {
        var all_complete = true;    
    $(".rightbilling").find("input:text").each(function(){


        if ($(this).val() == '' ) {
            all_complete = false;
            return true;
        };


    if (all_complete) {
        $("#step_1")
        .animate({
            paddingBottom: "120px"
        })
        .css({
            "background-image": "url(images/check.png)",
            "background-position": "bottom center",
            "background-repeat": "no-repeat"
        });

        $("#step_2").css({
            opacity: 1.0
        });
        $("#step_2 legend").css({
            opacity: 1.0 // For dumb Internet Explorer
        });
    };
});
</code></pre>
