Contact Form 7：无超时JS添加提示框代码失效问题求助

问题根源 #

Contact Form 7（CF7）的表单元素初始化逻辑并非完全在document.ready阶段完成。即便你的JS文件在CF7核心JS之后加载，CF7内部仍可能通过异步逻辑或延迟处理来设置表单元素状态（比如提交按钮的disabled属性）。当你的代码在document.ready中直接执行时，目标按钮的disabled状态还未被CF7设置，导致$('.wpcf7-submit[disabled]')无法匹配到任何元素，自然无法添加提示框。

setTimeout能生效只是因为延迟了代码执行，给了CF7足够时间完成按钮状态设置，但这属于“碰运气”的写法——延迟过长影响体验，过短又可能失效，确实不够可靠。

无超时解决方案 #

推荐两种更可靠的实现方式，按优先级排序：

1. 监听CF7专属初始化事件

CF7提供了wpcf7:init事件，该事件会在CF7完成所有表单初始化后触发，完美匹配需求：

jQuery(document).ready(function($) {
    // 监听CF7初始化完成事件
    $(document).on('wpcf7:init', function() {
        // 此时CF7已完成表单状态设置，可直接选择禁用的提交按钮
        $('.wpcf7-submit[disabled]').after('<div class="wpcf7-tooltip">Check the consent field to continue</div>');
    });
});

2. 使用MutationObserver监听按钮状态变化

如果按钮的disabled状态可能在初始化后动态变化（比如用户勾选/取消勾选同意框时），可以用MutationObserver监听属性变化，确保状态变更时及时添加/移除提示框：

jQuery(document).ready(function($) {
    // 针对所有CF7提交按钮创建观察者
    $('.wpcf7-submit').each(function() {
        const submitBtn = this;
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                // 检查disabled属性是否变化
                if (mutation.attributeName === 'disabled') {
                    const $btn = $(submitBtn);
                    if ($btn.is(':disabled')) {
                        // 按钮禁用时添加提示框（避免重复添加）
                        if (!$btn.next('.wpcf7-tooltip').length) {
                            $btn.after('<div class="wpcf7-tooltip">Check the consent field to continue</div>');
                        }
                    } else {
                        // 按钮启用时移除提示框
                        $btn.next('.wpcf7-tooltip').remove();
                    }
                }
            });
        });

        // 配置观察者：监听属性变化
        observer.observe(submitBtn, { attributes: true });
    });
});

这个方案不仅能处理初始化时的状态，还能响应后续用户操作带来的状态变化，体验更完善。

内容的提问来源于stack exchange，提问作者Chris Pink