为何jQuery的on事件处理器无法正常工作？

核心问题1：$(document).on('load') 事件绑定错误 #

jQuery中，页面所有资源加载完成的load事件需绑定在**window对象**上，而非document。document的load事件触发时机特殊，多数场景下不会触发，直接导致你的初始化代码从未执行。

核心问题2：静态方法中箭头函数的this指向错误 #

静态方法focusbtn_and_highlight_onClick里，你用箭头函数作为click回调：

$('button').on('click', ()=> {
  $(this).css('background-color', 'red')
})

箭头函数的this继承自外层作用域，静态方法的外层作用域是NavComponent类，而非被点击的按钮DOM元素，因此$(this)无法指向目标按钮，样式修改自然失效。

修复后的代码 #

调整load事件绑定对象，同时将回调改为普通函数（或改用event.target）：

$(window).on('load', function(){
  console.log('page loaded');
  NavComponent.focusbtn_and_highlight_onClick();
})

ngOnDestroy(): void {
}

static focusbtn_and_highlight_onClick(){
  console.log('func started');

  $('button')
  .on('click', function() { // 换成普通函数，this指向点击的按钮
    $(this).css('background-color', 'red')
    alert("hello")
  })
}

额外建议 #

Angular项目中尽量避免用jQuery绑定事件，框架本身的(click)指令更符合规范，也能规避DOM绑定问题。示例：
模板中：

<button (click)="handleButtonClick($event)">按钮</button>

组件类中：

handleButtonClick(event: MouseEvent) {
  const btn = event.target as HTMLElement;
  btn.style.backgroundColor = 'red';
  alert("hello");
}

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