.submit JS函数不在Safari中显示CSS叠加(除非我取消页面加载)

Question

我在提交表单时无法正确显示Safari中的奇怪问题.

应该发生的情况是,单击表单上的提交按钮时,叠加层将显示在表单上.

发生的事情是没有任何东西出现(虽然看起来好像有些东西,因为我无法再次点击所述按钮).有趣的是,如果我取消页面加载,则会出现叠加层.

这是在提交表单时运行的javascript代码.

function main_form_overlay() {
    var form_outer = jQuery('.main-form'),
    form = jQuery('.main-form form'),
    html,
    overlay;

    html = '<div class="loading"><span class="text">Checking 77 Destinations, please Be Patient <i class="fa fa-circle-o-notch fa-spin"></i></span></div>';

    form_outer.append(html);

    overlay = jQuery('.main-form .loading');

    form.on('submit', function(){
        console.log("In Here!");

        if (!overlay.is(':visible')) {
            overlay.show();
            console.log("Show Overlay");
        } else {
            overlay.hide();
            console.log("Hide Overlay");
        }
    });
}

这是"加载"类的CSS,它的价值.

.loading {
    background: rgba(#999, 0.9);
    bottom: -10px;
    display: none;
    left: -20px;
    position: absolute;
    right: -20px;
    top: -10px;

    .text {
        color: #fff;
        font-size: 26px;
        font-weight: 700;
        left: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        }
    }

JavaScript正在加载(控制台分别记录"在此处"和"显示叠加"短语,如果取消,则显示叠加).但是,点击时不会显示叠加层.

我试过以下浏览器,成功....

• Chrome(Apple Mac)
• Firefox(Apple Mac)
• Internet Explorer(Windows)

任何想法都会有所帮助.如果您还有其他需要,请告诉我.

Answer 1

顺便说一句，我设法解决了这个问题，@PeterTheLobster 最接近。

简而言之，在附加到“click”侦听器时，我们然后 e.preventDefault(); 表单，通过延迟表单提交 1 秒来确保显示叠加层。

function main_form_overlay() {
    var form_outer = jQuery('.main-form'),
    form = jQuery('.main-form form'),
    html,
    overlay;

    html = '<div class="loading-overlay"><span class="text">Checking 77 Destinations, please Be Patient <i class="fa fa-circle-o-notch fa-spin"></i></span></div>';

    form_outer.append(html);

    overlay = jQuery('.main-form .loading-overlay');

    jQuery('#gform_submit_button_2').on('click', function(event){
        //Prevent the form from submitting
        var e = event || window.event;
        e.preventDefault();
        console.log("In Here!");

        if (!overlay.is(':visible')) {
            overlay.show();
            console.log("Show Overlay");
        } else {
            overlay.hide();
            console.log("Hide Overlay");
        }

        //Submit the form now
        window.setTimeout(function() {
            form = jQuery('.main-form form');
            form.submit();          
        },1000);
    });
}