:visible 在提交事件后不起作用答案

【问题标题】：:visible doesn't work after submit event:visible 在提交事件后不起作用
【发布时间】：2014-07-08 19:23:24
【问题描述】：

我想在用户提交电子邮件后淡出我的表单。还有下一个问题。我只是无法捕捉到提交事件，所以我想要的是，如果出现成功消息，那么应该隐藏表单。我像这样使用: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') {
}

但它不起作用。怎么了？

【问题讨论】：

看起来响应的可见性是在成功处理程序执行后设置的
问题是 mce-success-response 元素在 ajax 调用之后显示，该调用再次在表单提交（ajax 提交）上初始化......所以当你的表单提交处理程序被称为 mce-success-response元素尚未显示
我认为这种情况下你需要使用ajax
在这种情况下，一种可能的解决方案是在表单提交处理程序上触发自定义事件并使用该自定义事件来完成您的工作，而不是使用提交处理程序
问题是您试图在提交事件中隐藏内容。但是在发送工作之前会触发提交事件。

标签： javascript jquery

【解决方案1】：

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

【讨论】：

我可以使用延迟，但无效的电子邮件被视为提交，我必须抓住成功..我没有完全控制，因为它由 MailChimp 处理..
我明白了，你可以使用jQuery验证插件，那样的话，就有一个验证句柄，我想你用那个句柄做你想做的事，祝你好运！

【解决方案2】：

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

但它有效！

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

您还可以使用下面的代码为hideing 添加延迟：

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

【讨论】：

【解决方案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();
    });

});

【讨论】：

【解决方案4】：

提交后是否收到来自 AJAX 的成功响应？根据您的代码 sn-p，我假设是这种情况，并且一旦您的 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提交。

希望对你有帮助！

【讨论】：