如何让主题single.php中的ACF表单可运行jQuery函数？

核心问题在于ACF灵活内容字段是动态渲染到DOM中的，你当前的代码在document.ready时直接绑定事件，但此时表单内的按钮组元素可能还未生成，导致事件绑定失效。另外，ACF自带的表单交互逻辑可能会阻止默认的点击事件冒泡，需要调整绑定方式。

解决方案1：使用事件委托绑定事件 #

将事件绑定到已存在的父级元素（比如body或更接近的容器），而非直接绑定到动态生成的按钮组上：

jQuery(document).on('click', '#yt_preview .acf-input .acf-button-group', function(e) {
    // 阻止ACF默认的表单提交/保存行为（如果有的话）
    e.preventDefault();
    e.stopPropagation();

    var yt_url_raw = document.querySelector('.acf-fields div.acf-field.acf-field-text.acf-field-6436f073d637e input');
    $(".acf-fields .acf-field-6436f1ff96408").css({'display':'block'});
    $(".acf-fields .acf-field-6436f073d637e").css({'display':'none'});
});

解决方案2：利用ACF自带的初始化事件 #

ACF提供了专门的事件用于字段初始化完成后执行代码，比document.ready更适配ACF的动态渲染逻辑：

jQuery(document).on('acf/ready', function() {
    // 绑定事件到按钮组
    jQuery('#yt_preview .acf-input .acf-button-group').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();

        var yt_url_raw = jQuery('.acf-fields .acf-field-6436f073d637e input').val();
        jQuery(".acf-fields .acf-field-6436f1ff96408").show();
        jQuery(".acf-fields .acf-field-6436f073d637e").hide();
    });
});

额外优化建议 #

• 避免使用硬编码的ACF字段ID（比如acf-field-6436f073d637e），可以给字段设置自定义CSS类名（在ACF字段编辑页面的「外观」选项中添加），这样选择器更易读且不易因字段ID变更失效。
• 使用jQuery的val()方法获取输入框值，比原生document.querySelector更简洁：var yt_url_raw = jQuery('.your-custom-class input').val();
• 用show()/hide()替代css({'display':'block'})，代码更简洁。

内容的提问来源于stack exchange，提问作者Gregory Schultz