jQuery函數僅在瀏覽器刷新時有效

Question

我在使用JQuery函數時遇到的問題是，它僅在刷新網頁時才起作用，它在每種瀏覽器上都以這種方式起作用。 我想做的是，一旦封閉在特定div容器中的所有文本字段都在其中包含數據，我希望該容器插入對勾圖像。 但目前只有在我在文本字段中輸入了所有數據並刷新了瀏覽器后，此圖像才變得可見。

.rightbilling是div容器的類，其文本字段正在嘗試評估，而'＃step1'是包含.rightbilling的字段集。

我已經嘗試解決了幾個小時了。非常感謝您的幫助。 如果您需要更多信息，請告訴我。

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

Answer 1

由於您正在使用document.ready函數，因此僅在頁面加載時才調用該函數。 您需要研究在輸入字段已更改時附加onChange偵聽器以調用您的函數。

Answer 2

$(document.body).ready(
    function () {
        var validation = 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
                        });
                    }
            });
        }
        validation();  //call it when the page is loaded
        $(".rightbilling").find("input:text").on("change",validation); //call it when input changes
    }
);