WordPress通过wp_enqueue_script引入的JS加载后函数不生效

问题原因 #

你遇到的问题由以下几个错误共同导致：

• 入队main.js时未声明jQuery依赖，导致JS执行时jQuery还未加载，触发$ is not defined报错
• WordPress默认开启jQuery无冲突模式，全局环境下无法直接使用$调用jQuery
• 代码未包裹DOM就绪监听，存在偶发的DOM未渲染完成就执行绑定逻辑的问题

修复步骤 #

1. 修改functions.php中main.js的入队规则，添加jQuery依赖
   把原main-js入队代码替换为：

wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/src/library/js/main.js', array( 'jquery' ), '1.0', true );

仅需修改第三个参数的依赖数组，声明依赖jQuery后，WordPress会自动调整加载顺序，保证jQuery在main.js之前加载完成。

2. 修改main.js代码，适配WordPress jQuery规则
   将代码修改为如下格式：

jQuery(document).ready(function($) {
  // 该回调内部可正常使用$语法调用jQuery
  $( '#photo-button' ).on( 'click', function () {
    $( '#display-photo' ).html("Hello <b>world!</b>");
  });
  // 其余自定义逻辑都可以写在这个回调内部
});

修改完成后清空缓存刷新页面即可正常触发点击事件。

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