javascript - 提交时未显示输入字段

Question

我的联系表单无法正常工作。当我输入错误的数据时，一切都正常工作，但是当数据正确时，输入字段不会显示。我需要用鼠标单击它们，然后它们开始显示。

这是我迄今为止尝试过的:

$('#submit_btn').click(function() {
        if($('#register').find('.wpcf7-mail-sent-ok').length > 0){
            $('#name-152').val('Full Name').show('slow');
            $('#email-152').val('Email').show('slow');
            $('#phone-152').val('Phone Number').show('slow');
        }
    });

请注意，类 .wpcf7-mail-sent-ok 仅在表单填写提交且正确填写后才会出现。最让我困惑的是 .find 找不到后代 .wpcf7-mail-sent-ok，它是后代之一..我已经用它进行了测试console.log(); 和 alert();

这是 WordPress 插件 - 联系表单 7

有什么想法吗？

Answer 1

“Contact Form 7”插件作用于提交事件以发挥其魔力，例如操纵样式并用 AJAX 样式提交替换标准表单提交行为。

由于这可能发生在按钮的 click 事件之后，并且可能发生在表单的 submit 事件上，因此您的代码运行得太快。

解决这个问题的一种方法是使用 setTimeout 延迟代码的执行:

$('#submit_btn').click(function() {
    setTimeout(function () {
        if ($('#register').find('.wpcf7-mail-sent-ok').length) {
            $('#name-152').val('Full Name').show('slow');
            $('#email-152').val('Email').show('slow');
            $('#phone-152').val('Phone Number').show('slow');
        }
    }, 100);
});