我正在尝试使用jQuery UI的slider()函数，并在控制台中不断收到以下错误：
TypeError： undefined不是函数（评估jQuery('#slider').slider()）
我肯定已经正确地链接到jQuery UI javascript和CSS文件 - 当我查看页面源时，它们都在那里。为什么我仍然会收到此错误？
如果它有用，我正在使用Rails和一些Bootstrap的东西。这是javascript代码：
<script type="text/javascript">
$(document).ready(function(){
$('#slider').slider();
});
</script>
由于
这是<head>：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<link href="/assets/jquery.ui.core.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.accordion.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.menu.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.button.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.resizable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.dialog.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.progressbar.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.selectable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.slider.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.spinner.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tabs.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tooltip.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.base.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.all.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap-theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap-theme.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/companies.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery-ui.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/scaffolds.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/bootstrap.js?body=1"></script>
<script src="/assets/bootstrap.min.js?body=1"></script>
<script src="/assets/companies.js?body=1"></script>
<script src="/assets/jquery-1.11.0.min.js?body=1"></script>
<script src="/assets/jquery-ui.min.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
<title>New Company - OE Fort by Oxford Entrepreneurs</title>
<meta content="authenticity_token" name="csrf-param" />
<meta content="FcOEJfo8vcCzR+Dq+5zOVSvm7Npfo+R+FoXrEPpV3js=" name="csrf-token" />
<!-- Bootstrap core CSS -->
<link href="../../../app/assets/stylesheets/bootstrap.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<link href="../../../app/assets/stylesheets/jquery-ui.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../jumbotron.css" rel="stylesheet">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#slider').slider();
});
</script>
</head>
答案 0 :(得分：7)
我猜想在加载JQuery之前加载这个函数会导致错误（因此你看到undefined错误的原因--JQuery未定义）
您能详细说明加载代码的方式吗？你可以发布你的<head>标签吗？
可能的原因可能是：
$("#slider")不是有效元素答案 1 :(得分：0)
该错误与 application.js.coffee 文件中缺少的行有关。如上所述：https://github.com/joliss/jquery-ui-rails您可以在此处使用特殊模块。
所以只需将以下行添加到您的 application.js.coffee 文件中，它就可以运行：
#= require jquery.ui.slider
答案 2 :(得分：0)
我刚刚发现，另一个可能的原因是你有两个不同版本的jquery链接。
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
...（其他一些捆绑包），然后：
bundles.Add(new ScriptBundle("~/bundles/ajax").Include(
"~/Scripts/jquery-1.10.2.min.js",
"~/Scripts/jquery.unobtrusive-ajax.min.js"));
E.g。在我的jqueryui包中，我有jquery-1.10.4.min.js（或者说更新版本），但是在我的ajax包中我有jquery-1.10.2.min.js。双击Chrome元素检查器中的错误，显示1.10.2中代码的链接。当我在ajax包中将其更改为1.10.4时，jqueryui元素突然起作用（在我的例子中是Tabs）。
当然，我应该做的只是将所有内容保留在jquery- {version} .js。
总而言之，（n个被忽视的）版本冲突是造成此错误的另一个可能原因。
答案 3 :(得分：0)
我知道这不会回答这个确切的问题，但它可能会帮助其他人为slider（）函数获取相同的错误消息。
如果在初始化时已在滑块中预设了值，则可能会出现以下内容：
$('#slider').val(5).slider();
如果删除值（5），还会得到“TypeError：'undefined'不是函数”
即。
$('#slider').val().slider();
相反，您需要将起始值插入输入标记。
<input type="text" id="slider" value="5">
如果在站点的许多位置使用滑块并且您希望让js文件包含默认值而不是让每个滑块包含相同的信息，则可能会进行此类设置。在我的情况下，我需要分散价值，这导致了这里看到的错误。
答案 4 :(得分：0)
如果遇到其他人，我无法选择使用asp.net
原来我并没有正确地包括所有内容，但是这位先生将它作为虚拟证据： http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/
答案 5 :(得分：0)
尝试这个，如果你面对＆＃34;未被捕获的类型错误不是一个函数javascript＆＃34; 它的工作原理
jQuery(function($) {
// your code here
});