Angular项目中$(document).ready代码在Edge生效但Chrome/Firefox无效

我帮你排查了下问题，大概率是这几个细节导致的浏览器兼容性差异，按步骤调整应该就能解决：

1. 选择器里的多余空格是关键坑点 #

看你代码里的选择器：$(" .collapse-link")和$(" .close-link")，开头多了个空格！Edge对这种冗余空格的容错性较高，但Chrome和Firefox会严格匹配带有前置空格的层级选择器——它会去找父元素下的子元素中带.collapse-link的节点，可你的HTML里collapse-link是直接挂在<a>标签上的，不存在这种层级关系。

把选择器里的前置空格去掉，改成：

$(".collapse-link").on("click", function() { ... })
$(".close-link").click(function() { ... })

2. Angular异步渲染导致DOM绑定时机错误 #

Angular是单页应用，DOM渲染是异步的，你用$(document).ready()可能在Angular还没渲染出目标DOM的时候就执行了。Edge可能刚好DOM加载顺序特殊，但Chrome/Firefox里会因为元素还未存在，导致事件绑定失败。

推荐两种修复方式：

• 方式一：用Angular生命周期钩子
  在组件的ngAfterViewInit()钩子中执行jQuery代码，这时候组件的DOM已经完全渲染完成：

  import { Component, AfterViewInit } from '@angular/core';
  declare var $: any; // 声明jQuery变量，避免TypeScript报错
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html'
  })
  export class YourComponentComponent implements AfterViewInit {
    ngAfterViewInit(): void {
      // 把你的jQuery逻辑放在这里
      $(".collapse-link").on("click", function() {
        console.log("hhahahaah")
        const a = $(this).closest(".x_panel"), 
              b = $(this).find("i"), 
              c = a.find(".x_content"); 
        a.attr("style") ? c.slideToggle(200, () => a.removeAttr("style")) : (c.slideToggle(200), a.css("height", "auto"));
        b.toggleClass("fa-chevron-up fa-chevron-down");
        return false;
      });
      $(".close-link").click(function() { 
        const a = $(this).closest(".x_panel"); 
        a.remove();
      });
    }
  }
  

• 方式二：使用事件委托
  把事件绑定到已存在的父元素（比如document或组件根元素）上，这样即使后续渲染的元素也能触发事件：

  $(document).on("click", ".collapse-link", function() {
    // 原代码逻辑
  });
  $(document).on("click", ".close-link", function() {
    // 原代码逻辑
  });
  

3. 确认jQuery在Angular中的全局引入顺序 #

确保你在angular.json的scripts数组里，先加载jQuery再加载你的自定义JS，否则custom.min.js里的$会提示未定义：

"scripts": [
  "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js",
  "src/assets/custom.min.js"
]

按上面的步骤调整后，应该就能在Chrome和Firefox里正常生效了！

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