TypeError: $(...).on 不是函数

Posted 2023-02-25

【中文标题】TypeError: $(...).on 不是函数

【英文标题】：TypeError: $(...).on is not a function

【发布时间】：2013-03-18 05:06:43

【问题描述】：

我正在使用jQuery litebox。添加 JS 和 CSS 文件后，我收到此错误 TypeError:

$(...).on is not a function at this line in js file                                           
 "return  $('body').on('click',       
'a[rel^=lightbox], area[rel^=lightbox]', function(e) " 

谁能帮我理解这里的问题？

我在 Cakephp 1.3 中做这个实现。

【问题讨论】：

您确实包含了 jQuery 1.7 或更高版本，并且您确实将代码包装在 document.ready 中，对吗？

是的，我添加了 jquery 1.7

我还没有为灯箱实现任何代码，如果我只是添加 js 和 css 文件我得到了这个错误

@user1613870：所以你是说你引用的代码不是你的？那么它是从哪里来的呢？

@Crowder 代码来自我正在使用的库 lightbox.js，在这一行我遇到错误

【参考方案1】：

如果您使用的是旧版本的 jQuery，则可能会出现问题。因为旧版本的 jQuery 有 'live' 方法而不是 'on'

【参考方案2】：

通常的原因是您也在使用 Prototype、MooTools 或其他使用 $ 符号的库，并且您在 jQuery 之后包含了该库，这样图书馆就“获胜”了（以$ 为自己）。所以$ 的返回值不是一个 jQuery 实例，所以它上面没有 jQuery 方法（比如on）。

您可以将 jQuery 与其他库一起使用，但如果这样做，您必须使用 jQuery 符号而不是其别名 $，例如：

jQuery('body').on(...);

通常最好在包含 jQuery 的 script 标记之后，在包含其他库的标记之前添加它：

<script>jQuery.noConflict();</script>

...虽然不是必需如果你在jQuery之后加载另一个库（如果你先加载另一个库）。

在同一页面上使用多个全功能 DOM 操作库并不理想，但仅在页面重量方面。因此，如果您可以只使用 Prototype/MooTools/whatever 或只使用 jQuery，那通常会更好。

【讨论】：

Crowder，感谢您的指导，我没有在 jquery 之前添加任何库，所有库都已添加在 jquery 库之后。我正在使用这种技术 css ('skin/lightbox.css', 'stylesheet'); ?> 和 script(array('libs/lightbox'), array('inline' => false)); ?>

@user1613870：正如我所说，如果您在 jQuery 之后包含另一个库（例如Prototype 或MooTools），您就会遇到这个问题。 （如果您将它们放在 before 中则不会；如果您将它们放在 before 中，则会遇到不同的问题。）您使用的是 Prototype 还是 MooTools？

noConflict 对我没有任何帮助...但是 jQuery('body').on(...);修复了问题...谢谢！现在就知道了:)

【参考方案3】：

在我的例子中，这个问题是通过将我的 jQuery 封装在：

(function($) 
//my jquery 
)(jQuery);

【讨论】：

你能解释一下my jQuery是什么意思吗？你的意思是jQuery version x.x.x 或jQuery cycle.all 还是你正在编写的脚本？

我认为他的意思是脚本，是的，围绕该函数封装我的脚本实际上解决了我的问题

【参考方案4】：

如果您使用的是旧版本的 jQuery(

【参考方案5】：

我尝试了 Oskar（和许多其他人）的解决方案，但对我来说它最终只适用于：

jQuery(function($)
   // Your jQuery code here, using the $
);

见：https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

【讨论】：

你是我的传奇。谢谢。

【参考方案6】：

就我而言，这段代码解决了我的错误：

(function (window, document, $) 
            'use strict';
             var $html = $('html');
             $('input[name="myiCheck"]').on('ifClicked', function (event) 
             alert("You clicked " + this.value);
             );
)(window, document, jQuery);

你不应该把你的功能放在里面 $(document).ready