Edge浏览器中多含Ajax的函数出现$ is not defined错误求助

这个错误的核心原因很明确：浏览器找不到jQuery的$对象——要么是你没引入jQuery库，要么是引入顺序不对，或者新增多个函数后不小心破坏了之前的依赖关系。下面给你一步步的解决方案：

1. 先确认jQuery已正确引入 #

你之前单个函数能运行，大概率是当时页面隐式加载了jQuery，但新增函数后可能因为页面结构调整（比如脚本位置移动）导致jQuery没加载。你需要在自定义脚本之前明确引入jQuery：

• 用CDN引入（最简单，无需本地文件）：

  <!-- 放在<head>或者<body>末尾，你的自定义脚本之前 -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  

• 如果是本地引入，检查文件路径是否正确：
  打开Edge的F12开发者工具→「网络」面板，刷新页面，看jQuery文件是否返回404，如果是，修正路径。

2. 严格控制脚本加载顺序 #

必须保证jQuery先加载完成，再执行你的自定义JS代码。比如正确的页面结构应该是：

<!-- 第一步：加载jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 第二步：加载你的自定义脚本 -->
<script>
document.getElementById("inputEventID").onchange = function () { myFunction() };
function myFunction() {
  $.ajax({
    type: 'post',
    url: 'webFetchMax.php',
    data: { eventID: form.eventID.value },
    success: function (response) {
      $('#divSlots').html(response);
    }
  });
}
// 其他带Ajax的函数...
</script>

3. 处理jQuery与其他库的冲突（如果有） #

如果页面里还引入了其他使用$的JS库（比如Prototype），会和jQuery冲突，导致$被覆盖。这时候有两种解决办法：

• 用jQuery代替$：

  function myFunction() {
    jQuery.ajax({ // 把$换成jQuery
      type: 'post',
      url: 'webFetchMax.php',
      data: { eventID: form.eventID.value },
      success: function (response) {
        jQuery('#divSlots').html(response);
      }
    });
  }
  

• 使用jQuery的noConflict方法，保留$的使用：

  jQuery.noConflict();
  jQuery(document).ready(function($) {
    // 这里可以继续用$，因为把$作为参数传入了
    $("#inputEventID").on("change", myFunction);
    
    function myFunction() {
      $.ajax({
        type: 'post',
        url: 'webFetchMax.php',
        data: { eventID: $("#inputEventID").val() },
        success: function (response) {
          $('#divSlots').html(response);
        }
      });
    }
  });
  

4. 推荐：把代码放在DOM就绪回调里 #

为了避免DOM元素还没加载就绑定事件的问题，同时确保jQuery已就绪，建议把所有自定义代码放在$(document).ready()（或简写$(function(){})）里：

$(function() {
  // 用jQuery绑定事件，更简洁
  $("#inputEventID").on("change", myFunction);

  function myFunction() {
    $.ajax({
      type: 'post',
      url: 'webFetchMax.php',
      // 用jQuery获取输入值，更可靠
      data: { eventID: $("#inputEventID").val() },
      success: function (response) {
        $('#divSlots').html(response);
      }
    });
  }

  // 其他带Ajax的函数也放在这里面...
});

先从第一步开始排查，90%的情况都是jQuery没加载或者顺序错了，解决后应该就能正常运行了。

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