WordPress custom post type单页中Javascript表单无法正常工作

1. 检查页面脚本加载差异 #

• 打开两个页面的开发者工具（F12），切换到控制台(Console)，查看Holiday页面是否存在未定义函数、404资源加载失败等报错
• 切换到**网络(Network)**标签筛选JS资源，对比Hotel和Holiday页面的脚本加载列表，确认表单依赖的核心脚本（如日期选择器、表单提交逻辑脚本）是否在Holiday页面正常加载

2. 排查模板文件隐性差异 #

• 核对single_holiday.php与single_hotel.php的表单HTML结构：
  • 确保表单的id、class、字段name属性、data-*数据属性完全一致（JS通常依赖这些选择器绑定交互事件）
  • 检查模板中是否存在条件判断代码，比如仅在Hotel页面才输出表单初始化的内联JS

3. 修复脚本Enqueue问题（替代footer硬编码加载） #

直接在footer硬编码脚本易引发依赖冲突，建议用WordPress官方规范方法加载，避免崩溃的关键注意点：

• 在主题functions.php中添加如下代码，精准控制脚本加载范围：

function bubbleholidays_enqueue_scripts() {
    // 加载表单依赖的核心脚本，声明依赖关系避免报错
    wp_enqueue_script('jquery');
    wp_enqueue_script('datepicker', get_template_directory_uri() . '/js/datepicker.js', array('jquery'), '1.0', true);
    wp_enqueue_script('form-handler', get_template_directory_uri() . '/js/form-handler.js', array('jquery'), '1.0', true);

    // 仅在Hotel或Holiday单页加载专属表单脚本
    if (is_singular(array('hotel', 'holiday'))) {
        wp_enqueue_script('single-form-script', get_template_directory_uri() . '/js/single-form.js', array('form-handler'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'bubbleholidays_enqueue_scripts');

• 之前enqueue崩溃通常是这几个原因：脚本路径错误、未声明依赖（比如没加array('jquery')）、函数重复定义，可检查functions.php是否有重复的enqueue代码

4. 修正表单初始化逻辑 #

• 找到表单初始化的JS代码（通常在$(document).ready()块内），确保选择器是通用而非仅针对Hotel页面：
  • 错误示例：$('#hotel-booking-form').datepicker()
  • 正确示例：$('.site-booking-form').datepicker()（使用通用类选择器）
• 检查JS代码是否硬编码依赖Hotel页面的URL、自定义字段值等专属内容

5. 排查缓存与插件冲突 #

• 清除WordPress缓存（含插件缓存、CDN缓存），旧脚本缓存可能导致新页面逻辑不生效
• 临时禁用所有插件，逐个重新启用，排查是否有表单插件、性能优化插件等阻止了Holiday页面的脚本加载

内容的提问来源于stack exchange，提问作者0xm1cro