JavaScript+jQuery+Angular问题：DOM未就绪致jQuery元素变量未定义

嘿，这个问题我之前也碰到过，咱们一步步来捋清楚：

你遇到的核心问题是变量赋值时机不对：虽然你在$(document).ready()里调用了init()，但那些指向jQuery元素的变量是在函数内部脚本加载时就直接赋值的——这时候DOM还没完全构建好，页面上的div元素根本不存在，所以变量自然就变成undefined了。简单说就是，你在元素还没“出生”的时候就去抓它，肯定抓不到。

Angular的ngOnInit()是组件生命周期里的关键钩子，它会在组件的DOM完全初始化完成后才触发。这时候页面上的元素都已经渲染好了，这时候再去获取div元素，就能准确拿到对应的jQuery对象了。

如果是在Angular项目里，推荐尽量贴合Angular的开发规范，同时解决这个问题：

• 优先用Angular的@ViewChild/@ViewChildren获取组件内的元素，比直接用jQuery更符合框架逻辑；如果一定要用jQuery，记得把元素选择逻辑放到ngOnInit里
• 把相关逻辑封装在组件类中，避免全局函数的混乱

举个示例代码：

import { Component, OnInit } from '@angular/core';
declare var $: any; // 若已在angular.json中引入jQuery，这里声明即可

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  private $targetDivs: any;

  ngOnInit(): void {
    // DOM就绪后再获取jQuery元素
    this.$targetDivs = $('.your-div-class');
    this.init();
  }

  private init(): void {
    // 在这里操作元素，比如绑定事件
    this.$targetDivs.on('click', () => {
      console.log('Div clicked!');
    });
  }
}

如果还是想用原生jQuery的方案，那只要调整变量赋值的时机就行：

function myCustomFunc() {
  let $divElements; // 只声明，不提前赋值

  function init() {
    // 到init执行时，DOM已经就绪，再去选择元素
    $divElements = $('.target-div');
    // 后续业务逻辑
    $divElements.css('color', 'red');
  }

  return { init };
}

$(document).ready(() => {
  myCustomFunc().init();
});

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