WordPress/WooCommerce wp-admin后台jQuery代码不生效的解决方法

• 代码语法本身不兼容jQuery运行规则：.ready()方法仅支持绑定在文档根对象或全局jQuery实例上，不支持绑定在具体DOM元素（如当前代码里的#postbox-container-1）上，绑定后回调永远不会触发
• WordPress后台jQuery为兼容模式运行：默认不会向全局作用域暴露$快捷变量，代码中直接使用$选择元素会触发$ is not defined的报错，导致后续逻辑中断
• 脚本加载时机不匹配：wp-admin中部分动态内容由AJAX异步渲染，脚本执行时目标DOM尚未生成，选择器匹配不到任何元素
• 脚本挂载钩子错误：如果自定义脚本使用了前端专用的wp_enqueue_scripts钩子加载，后台页面根本不会引入这段脚本，自然不会生效

// 适配WordPress兼容模式，将$作为闭包参数传入
jQuery(document).ready(function($) {
  // 先判断目标容器是否存在，避免空匹配报错
  if ($("#postbox-container-1").length > 0) {
    alert("now what?");
    $('p:contains("Poivre")').css('color', 'red');
  }
});

• 脚本挂载必须使用后台专用钩子admin_enqueue_scripts，不可混用前端钩子
• 注册脚本时将依赖项指定为jquery，确保自定义代码执行前jQuery库已完成加载
• 若目标元素为AJAX动态渲染内容，需绑定WordPress后台对应的自定义渲染完成事件，待元素加载完成后再执行样式修改逻辑
• 排查时打开浏览器开发者工具的控制台面板，直接根据报错信息定位未生效的具体原因

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