预约流程第三步出现Uncaught TypeError错误求助（Chrome浏览器）

Let's break down why this error is happening and walk through actionable fixes:

Root Cause #

This error occurs because the intlTelInput jQuery plugin isn't being properly loaded or initialized when your custom theme is active. Since the plugin works flawlessly with the default Twentyseventeen theme, your current theme is likely guilty of one (or more) of these issues:

• Missing the required intlTelInput JavaScript and CSS files that come bundled with the BookMe plugin
• Loading scripts in the wrong order (so custom.js runs before intlTelInput is available)
• Causing a jQuery conflict that breaks the plugin's functionality

Step 1: Verify Missing Dependencies #

First, compare the source code of your working (Twentyseventeen) and broken (custom theme) pages. You'll notice the working page includes intlTelInput.min.js and intlTelInput.min.css—these are core dependencies of the BookMe plugin that your custom theme isn't loading.

Step 2: Fix Script Loading Order with WordPress Enqueuing #

WordPress uses script enqueuing to manage dependencies correctly. Add this code to your theme's functions.php file to ensure intlTelInput loads before custom.js:

function enqueue_booking_dependencies() {
    // Only load these assets on the appointments page
    if (is_page('appointments')) {
        // Load WordPress's built-in jQuery
        wp_enqueue_script('jquery');
        
        // Define the path to BookMe's assets
        $bookme_asset_path = WP_PLUGIN_URL . '/bookme/assets/';
        
        // Load intlTelInput JS, with jQuery as a dependency
        wp_enqueue_script(
            'bookme-intl-tel-input',
            $bookme_asset_path . 'js/intlTelInput.min.js',
            array('jquery'),
            false,
            true // Load in the footer for better performance
        );
        
        // Load the corresponding intlTelInput CSS
        wp_enqueue_style(
            'bookme-intl-tel-input-css',
            $bookme_asset_path . 'css/intlTelInput.min.css'
        );
        
        // Load custom.js, now dependent on intlTelInput
        wp_enqueue_script(
            'bookme-custom-script',
            $bookme_asset_path . 'js/custom.js',
            array('bookme-intl-tel-input'),
            false,
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_booking_dependencies', 99); // High priority to override theme defaults

Step 3: Resolve jQuery Conflicts #

Some themes use jQuery's noConflict() mode, which can break plugins that expect the $ shortcut. Update line 330 in custom.js to include a safety check and avoid conflicts:

// Ensure intlTelInput is loaded before attempting to use it
if (typeof jQuery.fn.intlTelInput === 'function') {
    var phone = jQuery("#phone").intlTelInput("getNumber");
} else {
    console.error("intlTelInput plugin not found - check script loading order");
}

Alternatively, wrap your custom.js code in a jQuery ready wrapper to safely use the $ shortcut:

jQuery(document).ready(function($) {
    // Now you can use $ instead of jQuery
    var phone = $("#phone").intlTelInput("getNumber");
});

Step 4: Force Load Dependencies (If Theme Blocks Default Loading) #

If your theme is preventing the BookMe plugin from loading its own assets, add this to functions.php to force-load the dependencies on the appointments page:

function force_bookme_core_assets() {
    if (is_page('appointments')) {
        wp_enqueue_script('bookme-intl-tel-input', WP_PLUGIN_URL . '/bookme/assets/js/intlTelInput.min.js', array('jquery'), false, true);
        wp_enqueue_style('bookme-intl-tel-input-css', WP_PLUGIN_URL . '/bookme/assets/css/intlTelInput.min.css');
    }
}
add_action('wp_enqueue_scripts', 'force_bookme_core_assets', 999); // Ultra-high priority to ensure it loads first

These steps should resolve the error by ensuring the intlTelInput plugin is fully loaded and available before custom.js tries to call its methods.

内容的提问来源于stack exchange，提问作者Keyur Amin