未捕获的TypeError：undefined不是函数（jQuery和jQuery Easing）

Question

I am building out a site. 我正在建立一个站点。 I built out the backend, and now I am doing the front-end. 我建立了后端，现在在做前端。 On the front end I have bootstrap, various font awesome icons, and angular. 在前端，我有引导程序，各种字体真棒图标和棱角分明。 It should also be noted this is a rails app. 还应注意，这是一个Rails应用程序。

I want to add 1 page scroll feature using jQuery & jQuery easing, that is powered by a font-awesome arrow. 我想使用jQuery＆jQuery easing添加1页滚动功能，该功能由超棒的字体提供支持。 I am obviously not doing something right, because when used it turns blue (thought maybe it was an "active state" because of the href?), and turns all of the font (everything) on my page blue. 我显然做得不好，因为使用时它变成蓝色（由于href可能被认为是“活动状态”？），并且页面上的所有字体（所有内容）都变成了蓝色。

When in chrome's console, I get the error; 在chrome的控制台中，出现错误；

Uncaught TypeError: undefined is not a function

Which is referring to this line (might be arbitrary) in jQuery; 在jQuery中指的是这一行（可能是任意的）；

this.pos = eased = jQuery.easing[ this.easing ](

Here is the rest of my code; 这是我其余的代码；

index.html.erb index.html.erb

<div class="page-scroll" id="arrow"><a href="#clients"><i class="fa fa-chevron-down"></i><a></div>

styles.css styles.css

  #arrow {
    font-size: 25px;
    color: grey;
}

main.js main.js

    $(function() {
      $('.page-scroll a').bind('click', function(event){
         $('html, body').animate({
             scrollTop: $("#clients").offset().top
         }, 1500);
         event.preventDefault();
     });
  });

application.html.erb (thanks to another SO question, jQuery & jQuery Easing placed under style sheets) application.html.erb（由于另一个SO问题，放在样式表下的jQuery和jQuery Easing）

<!-- Easing for Page Scroll -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

When I comment out the div in index, all font goes back to normal (it's blue when it's active). 当我注释掉索引中的div时，所有字体都恢复正常（激活时为蓝色）。 When I click on the button, it takes me to the element I want, but it drops you there, it doesn't have the easing aspect (which is why I am adding easing). 当我单击按钮时，它将带我到所需的元素，但是将您放到那里，它没有缓动方面（这就是为什么要添加缓动的原因）。

I have searched a fair amount, and I am baffled about this (especially the changing of the text). 我已经搜索了相当多的内容，对此感到困惑（尤其是文本的更改）。 Any help would be very appreciated. 任何帮助将不胜感激。

Answer 1

I have since figured out what causes this. 从那以后，我就找出了造成这种情况的原因。

When this happens, your page cannot find jQuery even though it is being called. 发生这种情况时，即使页面被调用，您的页面也找不到jQuery。 To fix this, make sure your page content looks something like this (for rails, all of this would be in application.html.erb ); 要解决此问题，请确保页面内容看起来像这样（对于Rails，所有这些都在application.html.erb中 ）；

head 头

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Good SEO.">
    <meta name="author" content="">

    <title>Your Title</title>

    <!-- Bootstrap Core CSS for smaller projects/single page I'll use a CDN -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <!-- Fonts -->
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet" type='text/css'>

    <!-- CSS or in assets/stylesheets-->
    <link href="/assets/styles.css" media="screen" rel="stylesheet">

</head>

after closing body & html tags 关闭body和html标签后

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js">
</body>    
</html>

I've noticed the order has to be jQuery, bootstrap (if you're using it), then jquery.easing. 我注意到订单必须是jQuery，引导程序（如果正在使用），然后是jquery.easing。

未捕获的TypeError：undefined不是函数（jQuery和jQuery Easing）

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-10-29 03:03:26

未捕获的TypeError：undefined不是函数（jQuery和jQuery Easing）

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-10-29 03:03:26

解决方案1
0 已采纳 2014-10-29 03:03:26