WordPress自定义JavaScript类无法生效问题求助

问题1：未调用事件绑定方法 #

你的Search类仅定义了events()方法，但在constructor中没有执行它，导致点击事件从未绑定到按钮上。

修复后searchengine.js代码：

import $ from "jquery"
class Search {
    constructor(){
        this.searchinput =  $(".search-submit") ;
        // 新增：调用events方法完成事件绑定
        this.events();
    }
    events(){
        this.searchinput.on("click", this.typingLogic.bind(this));
    }
    typingLogic(){
        console.log("test")
    }
}
export default Search

问题2：DOM未加载完成就执行元素选择 #

如果JS代码在页面DOM渲染完成前执行，$(".search-submit")会获取到空对象，事件绑定自然无效。需要确保代码在DOM就绪后运行。

可选修复方案二选一：

方案1：在类内部等待DOM就绪

修改searchengine.js：

import $ from "jquery"
class Search {
    constructor(){
        // 等待DOM加载完成后再获取元素并绑定事件
        $(document).ready(() => {
            this.searchinput = $(".search-submit");
            this.events();
        });
    }
    events(){
        this.searchinput.on("click", this.typingLogic.bind(this));
    }
    typingLogic(){
        console.log("test")
    }
}
export default Search

方案2：在index.js中延迟初始化类

修改index.js：

import Search from "./modules/searchengine"

// 等待DOM加载完成后再初始化类
document.addEventListener('DOMContentLoaded', () => {
    const search = new Search();
});

问题3：WordPress jQuery NoConflict模式兼容（可选） #

WordPress默认加载的jQuery启用了noConflict模式，$变量会被禁用。如果你依赖WordPress自带的jQuery而非自行打包，需调整代码适配：

修改searchengine.js：

class Search {
    constructor(){
        $(document).ready(() => {
            // 改用jQuery全局变量
            this.searchinput = jQuery(".search-submit");
            this.events();
        });
    }
    events(){
        this.searchinput.on("click", this.typingLogic.bind(this));
    }
    typingLogic(){
        console.log("test")
    }
}
export default Search

同时更新functions.php，将jQuery设为依赖并延迟加载JS：

function logistics_js_files()
{
    // 添加jquery作为依赖，指定在页面底部加载
    wp_register_script('main_scripts', get_theme_file_uri('/build/index.js'), array('jquery'), false, true);
    wp_enqueue_script('main_scripts');
}
add_action('wp_enqueue_scripts', 'logistics_js_files'); 

额外检查项 #

• 确认修改src目录下的文件后，已重新执行Node.js构建命令（如npm run build），确保build/index.js是最新产物。
• 打开浏览器开发者工具Network面板，检查build/index.js是否成功加载，无404错误。
• 在控制台直接执行$(".search-submit")或jQuery(".search-submit")，确认能正常获取到搜索按钮元素。

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