Question

我希望在用户提交电子邮件后淡出我的表单。还有下一个问题。我只是无法捕获提交事件，所以我想要的是，如果成功消息出现，那么表单应该被隐藏。我像这样使用:visible：

$('#mc-embedded-subscribe-form').submit(function (e) {
    if($('#mce-success-response').is(':visible')){
        $("#mc_embed_signup").hide();
    }
});

#mce-success-response 是成功对话框。

我也尝试过：

if( $("#mce-success-response").css('display') == 'block') {
}

但它不起作用。怎么了？

Answer 1

是的，我认为submit事件只是一种单向，您只是提交，并且当您喜欢这种方式时，您不希望得到回应。也许你可以使用可以处理结果的ajax。实际上，您只需提交表单，然后淡出我认为的表单。

Answer 2

这是一种解决方法，而不是一种有效的解决方案。

但它有效！

function checkSuccess() {
    if ($('#mce-success-response').is(':visible')) {
        $("#mc_embed_signup").hide();
    }
} 
window.setInterval(checkSuccess, 100);

您还可以使用以下代码为hide添加延迟：

function checkSuccess() {
    function successAction(){
        $("#mc_embed_signup").hide();            
    }
    if ($('#mce-success-response').is(':visible')) {
        setTimeout(successAction, 2500);
    }
} 
window.setInterval(checkSuccess, 100);

Answer 3

一种可能的解决方案是在这种情况下使用自定义事件（因为我在注释中解释了success-respone元素显示在ajax成功处理程序中）。

所以在你的mce_success_cb方法

中

if (resp.result == "success") {
    $('#mce-' + resp.result + '-response').show();
    $('#mce-' + resp.result + '-response').html(resp.msg);
    $('#mc-embedded-subscribe-form').each(function () {
        this.reset();
    });

    $("#mc-embedded-subscribe-form").trigger('submitsuccess');
    // If the form has errors, display them, inline if possible, or appended to #mce-error-response
} else {
    //rest of your code
}

然后

$(document).ready(function () {

    $('#mc-embedded-subscribe-form').on('submitsuccess', function (e) {
        $("#mc_embed_signup").hide();
    });

});

Answer 4

提交后，您是否收到了AJAX的成功回复？根据你的代码片段，我假设是这样的，并且一旦你的Ajax请求完成就会出现成功boz。由于它将持续一段时间，您可以尝试以下代码。

function waitForIt(){
   if(!$('#mce-success-response').is(':visible')){
        setTimeout(waitForIt(),500);
    } else{
       $("#mc_embed_signup").hide(); 
}

$('#mc-embedded-subscribe-form').submit(function (e) {
        setTimeout(waitForIt(),500);
    }
});

或者，如果不是弹出成功消息的AJAX响应，您可以尝试在表单提交和用户操作之间放置一个接口。将您的输入类型从submit更改为button，或使用普通image作为按钮，即<img>。使用click()代替submit()，检查容器是否可见，如果是，则隐藏所需的容器并trigger提交。

希望它有所帮助！

：提交事件后，可见不起作用

4 个答案: