jQuery DateTimePicker仅iOS设备无法加载，提示“Can't find variable $”问题排查求助

云原生阿岚

2026-4-27

问题：jQuery DateTimePicker在iOS设备无法加载，报错“Can't find variable $”

问题描述

我的jQuery DateTimePicker在桌面端和安卓设备上运行正常，但在iOS设备上完全无法加载。查看iOS控制台日志，显示错误“Can't find variable $”，其他设备无此报错。想知道原因是不是jQuery加载方式不正确？以下是当前页面的资源加载代码和初始化片段：

页面资源加载代码：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="stylesheet" href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css />
<script src=https://code.jquery.com/jquery-3.4.1.js></script>
<link rel="stylesheet" href=https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js></script>
<script src=https://cdn.tailwindcss.com></script>
<!--modified 27/07/22 -->
<link rel="stylesheet" href="/tailwind.css" />
<!-- main css and responsive css -->
<link rel="stylesheet" type="text/css" href="/jquery.datetimepicker.min.css" media="screen and (min-width: 768px)" />
<link rel="stylesheet" href="/jquery.datetimepickerresponsive.min.css" media="screen and (max-width: 767px)" />
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

初始化代码片段：

$(document).ready(function() {
  // 初始化DateTimePicker的代码
});

问题原因分析

这个错误“Can't find variable $”明确说明iOS设备上jQuery没有成功加载，导致$这个jQuery的别名未被定义。结合你的代码和跨设备表现，最可能的原因是：

HTML属性值缺少引号：你的资源加载代码中，多个src和href属性的值没有用双引号包裹（比如<script src=https://code.jquery.com/jquery-3.4.1.js></script>）。虽然大部分现代浏览器会容错这种不规范的写法，但iOS的Safari对HTML语法的解析更为严格，可能会错误解析这些无引号的属性值，导致jQuery文件无法正常加载。
次要可能：少数情况下，iOS Safari的网络缓存或隐私设置（比如阻止跨域资源）可能导致CDN的jQuery加载失败，但这种情况概率较低，因为其他设备正常。

解决方案

1. 修复HTML属性的引号问题（优先级最高）

把所有link和script标签的href、src属性值用双引号包裹，这是标准的HTML语法，能解决Safari的解析问题。修改后的关键代码示例：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<!-- 其他资源链接也需要添加双引号 -->

2. 验证jQuery加载状态（调试用）

可以在初始化代码前添加一段调试代码，确认jQuery是否加载成功，方便排查：

// 在$(document).ready之前添加
if (typeof jQuery === 'undefined') {
  console.error('jQuery未成功加载！');
} else {
  console.log('jQuery加载成功，版本：' + jQuery.fn.jquery);
}

3. 备选：使用jQuery全名代替$别名

如果担心$被其他库占用（虽然你的情况主要是加载问题），可以把初始化代码中的$(document).ready()改成jQuery(document).ready()，确保使用的是jQuery的核心对象：

jQuery(document).ready(function() {
  // 你的DateTimePicker初始化代码
});

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