WordPress搜索框JS报错：Cannot read properties of undefined (reading 'on')

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'on')错误，本质是初始化livesearch类时，$("#abc")还没找到对应DOM元素，导致searchTypingArea为undefined，后续调用.on()就报错。ID选择器本身用法没问题，问题出在元素加载时机或动态渲染上，类选择器能正常获取是因为那些元素在JS执行时已经存在于DOM中。

下面是具体解决思路：

1. 用事件委托替代直接元素绑定 #

如果你的搜索遮罩层（.search-overlay）是点击按钮后才动态显示/生成的，那初始化类的时候#abc还没被渲染到DOM里。这种情况用事件委托最稳妥——把事件绑定到已经存在的父级元素上，监听子元素的事件：

修改JS代码：

import $ from 'jquery';
class LiveSearch { // 类名首字母大写更规范
  constructor() {
    this.events();
  }

  events() {
    // 绑定到已存在的父级.search-overlay，监听#abc的keydown事件
    $('.search-overlay').on('keydown', '#abc', this.TypingLogic.bind(this));
    
    // 保留你原来的其他元素绑定
    this.openingSearchButton = $(".js-search-trigger");
    this.closingCrossButton = $(".search-overlay__close"); 
    this.searchoverlay = $(".search-overlay");
    // 可继续绑定按钮点击等其他事件
  }

  TypingLogic() {
    setTimeout(() => {console.log("Timeout test");}, 2000);
    // 后续逻辑正常编写
  }
}

// 确保DOM完全加载后再实例化类
$(document).ready(() => {
  new LiveSearch();
});

2. 延迟获取动态生成的元素 #

如果搜索框是点击按钮后才被插入DOM的，也可以在触发显示遮罩的事件里，等元素渲染完成后再获取：

import $ from 'jquery';
class LiveSearch {
  constructor() {
    this.openingSearchButton = $(".js-search-trigger");
    this.closingCrossButton = $(".search-overlay__close"); 
    this.searchoverlay = $(".search-overlay");
    this.events();
  }

  events() {
    this.openingSearchButton.on('click', () => {
      // 点击显示遮罩后，延迟确保#abc已渲染
      setTimeout(() => {
        this.searchTypingArea = $("#abc");
        this.searchTypingArea.on("keydown", this.TypingLogic.bind(this));
      }, 100);
    });
  }

  TypingLogic() {
    setTimeout(() => {console.log("Timeout test");}, 2000);
  }
}

$(document).ready(() => {
  new LiveSearch();
});

3. 排查ID冲突问题 #

WordPress生态里可能有其他插件/主题代码用了相同的abc ID，导致选择器异常。可以把ID改成更独特的名称，比如site-main-search-term，同步更新HTML和JS里的选择器：

修改HTML：

<input type="text" class="search-term" placeholder="What are you looking for?" id="site-main-search-term" >

修改JS里的选择器：

this.searchTypingArea = $("#site-main-search-term");

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