外部JavaScript文件定义的函数点击后无法触发调用问题

• 核心问题：重复引入不同版本jQuery导致事件绑定逻辑未执行。页面头部先加载了jQuery 2.2.4，quickstart.js内的DOM就绪回调$(function(){})是注册在这个2.2.4版本的jQuery队列里的，但页面底部又加载了jQuery 3.4.1，会直接覆盖全局的$和jQuery对象，之前2.2.4版本注册的就绪回调不会被触发，按钮的点击事件从头到尾没有绑定上，所以点击后无响应、也无报错。
• 次要风险：quickstart.js内混入了HTML语法注释<!--At the bottom of the page -->，JS引擎无法识别HTML注释语法，存在触发脚本解析异常的可能。

1. 删除页面底部重复引入的jQuery 3.4.1脚本标签，整站只保留一个版本的jQuery，且放在所有依赖jQuery的脚本之前加载。
2. 清理quickstart.js内的非JS语法内容，删除混入的HTML注释，修正后的quickstart.js代码如下：

$(function () {
  const callButton = document.getElementById("button-call");
  callButton.onclick = (e) => {
    e.preventDefault();
    makeOutgoingCall();
  };

  async function makeOutgoingCall() {
    alert("Test");
  }
});

3. 效果校验：修改完成后刷新页面，点击通话图标即可正常弹出内容为“Test”的提示框。如果需要确认绑定逻辑正常执行，可以在$(function(){})的第一行加打印日志console.log('按钮事件绑定完成')，刷新页面后控制台出现对应日志即表示脚本运行正常。

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