解决 jQuery 报错 $().on is not a function 的方法

在使用jQuery进行网页开发时，有时可能会遇到“$().on is not a function”这样的报错信息。这个问题可能会让开发者感到困惑，但通常有几种常见的原因和相应的解决方法。

原因一：jQuery库未正确引入

如果页面中没有正确引入jQuery库或者引入的顺序不正确，就可能导致该报错。解决方法很简单，首先要确保在使用jQuery相关功能的代码之前，已经正确引入了jQuery库文件。可以通过在HTML文件的标签中添加如下代码来引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

要注意引入的顺序，jQuery库应该在其他依赖它的脚本之前引入。

原因二：jQuery版本冲突

不同版本的jQuery可能会有一些差异，如果项目中引入了多个不同版本的jQuery库，就可能会导致冲突。此时，需要检查项目中是否存在重复引入jQuery库的情况，并确保只使用一个版本的jQuery。可以通过搜索整个项目文件，查找包含“jquery”关键字的脚本引入语句，删除多余的引入。

原因三：变量名冲突

如果在代码中使用了与jQuery冲突的变量名，也可能会出现这个问题。例如，定义了一个名为“$”的变量，这可能会覆盖掉jQuery的“$”别名。解决方法是避免使用与jQuery冲突的变量名，或者使用jQuery的另一个别名“jQuery”来代替“$”。例如：

jQuery(document).ready(function() {
    jQuery('.element').on('click', function() {
        // 处理点击事件
    });
});

原因四：代码执行时机问题

如果在页面元素还未加载完成时就尝试绑定事件，也可能会报错。可以将相关代码放在文档加载完成后再执行，例如使用$(document).ready() 或者 $(window).on('load') 等方法来确保元素已经加载完成。

通过检查和解决上述可能的原因，一般可以有效地解决“$().on is not a function”的报错问题，让jQuery代码正常运行。