WooCommerce我的账户账单地址页自定义jQuery代码无法运行如何解决？

问题核心原因 #

WooCommerce 我的账户页面的地址表单通常存在两种特殊情况导致直接绑定事件失效：

1. 表单元素可能在 document.ready 触发后才完成动态渲染（部分主题或插件会做异步加载/局部刷新），直接绑定事件到目标元素时元素还未生成，绑定无效
2. WordPress 自带的 jQuery 默认为无冲突模式，未正确包裹的 $ 标识符会触发报错

解决方案 #

1. 替换为事件委托+兼容无冲突模式的JS代码

把你的test.js内容替换为以下代码：

jQuery(document).ready(function ($) {
    // 事件委托绑定到document，无论元素何时渲染都能触发事件
    $(document).on('change', '#billing_test', function () {
        myFunc();
    })

    function myFunc() {
        var complex_name = $('#billing_test').val();
        if (complex_name === 'mr') {
            alert('works');
            $("#billing_suburb").val('LDM');
            $('#billing_postcode').val('5000');
        }
    }
})

2. 修正脚本入队规则

调整你的PHP入队代码，设置脚本加载到页脚、添加版本号避免缓存，同时限制仅在我的账户页面加载，避免全局加载冗余代码：

function my_theme_scripts() {
    // 仅在我的账户页面加载脚本
    if (is_account_page()) {
        // 第4个参数为自定义版本号，第5个参数true代表加载到页脚
        wp_enqueue_script( 'test', get_template_directory_uri() . '/js/test.js', array( 'jquery' ), '1.0.1', true );
    }
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

验证排查步骤 #

修改完成后按以下顺序排查：

• 清空WordPress站点缓存、浏览器缓存，确保加载的是最新版脚本
• 打开浏览器开发者工具控制台，执行 jQuery('#billing_test').length，如果返回值为0，说明目标字段ID不是billing_test，需要到页面实际检查元素的真实ID后替换代码中的对应字段
• 如果返回值大于0，切换#billing_test的选项，看是否触发alert，确认功能正常

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