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中执行此实现。

Answer 1

问题可能在于您使用的是旧版本的jQuery。因为旧版本的jQuery具有“live”方法而不是“on”

Answer 2

通常的原因是你还使用Prototype，MooTools或其他一些使用$符号的库，你之后就包含了那个库jQuery，所以图书馆“赢了”（自己拿$）。因此$的返回值不是jQuery实例，因此它没有jQuery方法（如on）。

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

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

通常最好在你的script标签之后立即添加它，包括jQuery，然后包括另一个库：

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

...如果你在jQuery之后加载另一个库，那么它不是 required （如果你先加载另一个库的话就是这样）。

但是，就页面重量而言，在同一页面上使用多个全功能DOM操作库并不理想。所以，如果你能坚持使用Prototype / MooTools /无论是jQuery还是jQuery，那通常会更好。

Answer 3

在我的例子中，通过将我的jQuery封装在：

中解决了这个问题

<w:p>
  <w:pPr><w:pStyle w:val="Normal"/><w:numPr><w:ilvl w:val="0"/><w:numId w:val="1"/></w:numPr></w:pPr>
  <w:r><w:t>first list item</w:t></w:r>
</w:p>
<w:p>
  <w:pPr><w:pStyle w:val="Normal"/><w:numPr><w:ilvl w:val="0"/><w:numId w:val="1"/></w:numPr></w:pPr>
  <w:r><w:t>second list item</w:t></w:r>
</w:p>
<w:p>
  <w:pPr><w:pStyle w:val="Normal"/><w:numPr><w:ilvl w:val="1"/><w:numId w:val="1"/></w:numPr></w:pPr>
  <w:r><w:t>one</w:t></w:r>
</w:p>
<w:p>
  <w:pPr><w:pStyle w:val="Normal"/><w:numPr><w:ilvl w:val="1"/><w:numId w:val="1"/></w:numPr></w:pPr>
  <w:r><w:t>two</w:t></w:r>
</w:p>
<w:p>
  <w:pPr><w:pStyle w:val="Normal"/><w:numPr><w:ilvl w:val="2"/><w:numId w:val="1"/></w:numPr></w:pPr>
  <w:r><w:t>one</w:t></w:r>
</w:p>
<w:p>
  <w:pPr><w:pStyle w:val="Normal"/><w:numPr><w:ilvl w:val="2"/><w:numId w:val="1"/></w:numPr></w:pPr>
  <w:r><w:t>two</w:t></w:r>
</w:p>
<w:p>
  <w:pPr><w:pStyle w:val="Normal"/><w:numPr><w:ilvl w:val="2"/><w:numId w:val="1"/></w:numPr></w:pPr>
  <w:r><w:t>three</w:t></w:r>
</w:p>
<w:p>
  <w:pPr><w:pStyle w:val="Normal"/><w:numPr><w:ilvl w:val="1"/><w:numId w:val="1"/></w:numPr></w:pPr>
  <w:r><w:t>three</w:t></w:r>
</w:p>
<w:p>
  <w:pPr><w:pStyle w:val="Normal"/><w:numPr><w:ilvl w:val="0"/><w:numId w:val="1"/></w:numPr></w:pPr>
  <w:r><w:t>third list item</w:t></w:r>
</w:p>

Answer 4

如果您使用旧版本的jQuery（＆lt; 1.7），则可以使用“bind”而不是“on”。这只适用于您使用旧版本的情况，因为从jQuery 3.0开始，“bind”已被弃用。

Answer 5

我尝试过Oskar（以及其他许多人）的解决方案，但对我来说，最终只能使用：

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

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

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

TypeError：$（...）。on不是函数

6 个答案: