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