类型错误：$(...)没有on函数。

Question

我正在使用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进行此实现。

- user1613870

---

你是否已经包含了 jQuery 版本 1.7 或更新的版本，并且将你的代码用 document.ready 包裹起来了呢？ - adeneo

是的，我已经添加了 jQuery 1.7。 - user1613870

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

@user1613870：所以你的意思是你引用的代码不是你自己写的？那它是从哪里来的呢？ - T.J. Crowder

@Crowder，那段代码来自于我正在使用的库lightbox.js，在这一行我遇到了错误。 - user1613870

Answer 1

问题可能是您使用的是旧版本的jQuery。因为旧版本的jQuery使用'live'方法而不是'on'方法。

- Shivang Gupta

Answer 2

通常的原因是您还在使用Prototype、MooTools或其他使用$符号的库，并且在jQuery之后引入了该库，因此该库“胜出”（将$用于自身）。因此，$的返回值不是一个jQuery实例，因此它没有jQuery方法（如on）。

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

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

在包含jQuery的script标签之后，另一个库的script标签之前，最好立即添加以下内容：

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

如果在jQuery之后加载其他库，则不需要 必须 ，但如果在其他库之前加载，则需要。

在同一页面上使用多个完整功能的DOM操作库并不理想，因为会增加页面的负担。因此，如果您可以坚持只使用Prototype/MooTools/其他库或只使用jQuery，通常情况下这更好。

- T.J. Crowder

---

Crowder，感谢您的指导。在jQuery之前，我没有添加任何库，所有库都是在jQuery库之后添加的。我正在使用以下技术 <?php echo $html->css ( 'skin/lightbox.css', 'stylesheet' ); ?> 和 <?php echo $html->script(array('libs/lightbox'), array('inline' => false)); ?>。 - user1613870

正如我所说，如果你在jQuery之后包含另一个库（比如Prototype或MooTools），你就会遇到这个问题。（如果你把它们放在之前，你会有不同的问题。）你正在使用Prototype或MooTools吗？ - T.J. Crowder

noConflict 对我没用...但是 jQuery('body').on(...); 解决了问题...谢谢！现在知道了 :) - Levchik

Answer 3

在我的情况下，通过将我的jQuery封装在以下代码中解决了这个问题：

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

- Oskar

---

请问您所说的 my jQuery 是什么意思？是指 jQuery 版本 x.x.x 还是 jQuery cycle.all，还是您正在编写的脚本？ - user9934620

我认为他指的是脚本，是的，将我的脚本封装在那个函数周围实际上解决了我的问题。 - Jose Paez

Answer 4

如果你正在使用旧版本的 jQuery（< 1.7），那么你可以使用 "bind" 而不是 "on"。这只适用于你使用旧版本的情况，因为自从 jQuery 3.0 起，"bind" 已被弃用。

- Adhish

Answer 5

我尝试了Oskar（和许多其他人）的解决方案，但最终只有以下方法对我有效：

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

请查看：https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

- ownking

---

在我的情况下，您是一个传奇。谢谢。 - user9934620

Answer 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 内部

- Mohammad Sadegh Maleki