本文介绍了未捕获的TypeError：undefined不是函数 - typeahead.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用基本的。如果我在单独的HTML文件中创建它，该示例有效。如下所示。
I'm trying to get a a basic typeahead.js example to work. The example works if I create it in a separate HTML file as below.
<html>
<head>
<script type="text/javascript" src="/static/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/typeahead.bundle.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
// the typeahead jQuery plugin expects suggestions to a
// JavaScript object, refer to typeahead docs for more info
matches.push({ value: str });
}
});
cb(matches);
};
};
var djs = ['Hardwell', 'Armin van Buuren', 'Avicii', 'Tiesto', 'David Guetta',
'Dimitri Vegas & Like Mike', 'Nicky Romero', 'Steve Aoki', 'Afrojack',
'Dash Berlin', 'Skrillex', 'Deadmau5', 'Alesso', 'W&W', 'Calvin Harris',
'NERVO', 'Above & Beyond', 'Sebastian Ingrosso', 'Axwell', 'Aly & Fila',
'Markus Schulz', 'Daft Punk', 'Headhunterz', 'Zedd', 'Knife Party',
'Swedish House Mafia', 'Showtek', 'Andrew Rayel', 'Fedde Le Grand',
'Dyro', 'Laidback Luke', 'Paul van Dyk', 'ATB', 'Angerfist', 'Dada Life',
'Kaskade', 'Frontliner', 'Steve Angello', 'Sander Van Doorn',
'Martin Garrix', 'Porter Robinson', 'Ferry Corsten', 'Chuckie',
'Krewella', 'Coone', 'Carl Cox', 'Bobina', 'Omnia', 'Orjan Nilsen',
'Zatox', 'Gareth Emery', 'Bingo Players', 'Infected Mushroom',
'Eric Prydz', 'Tommy Trash', 'Wildstylez', 'Arty', 'R3hab', 'Madeon',
'Vicetone', 'Brennan Heart', 'DJ Feel', 'Gunz For Hire', 'Diplo',
'Tenishia', 'Noisecontrollers', 'Mike Candys', 'DJ Antoine',
'Quentin Mosimann', 'Project 46', 'Blasterjaxx', 'D-Block & S-te-Fan',
'Dillon Francis', 'Dannic', 'Adaro', 'Richie Hawtin', 'Martin Solveig',
'Felguk', 'Myon & Shane 54', 'Cosmic Gate', 'Heatbeat', "John O'Callaghan",
'Wasted Penguinz', 'Tiddey', 'Skazi', 'Da Tweekaz', 'Tenashar',
'Bob Sinclar', 'Benny Benassi', 'Stafford Brothers', 'DJ BL3ND',
'Paul Oakenfold', 'Mat Zo', 'Diego Miranda', 'DJs From Mars', 'Matt Darey',
'UMEK', 'Solarstone', 'Ummet Ozcan', 'Ran-D', 'Disclosure', 'Rudimental',
'Flux Pavilion', 'Nero', 'Datsik', 'Moby', 'Zeds Dead', 'The Prodigy',
'Bassnectar', 'Adventure Club', 'Dirty South', 'Borgore', 'Modestep',
'Bonobo', 'Feed Me', 'Flosstradamus', 'The Glitch Mob', 'Rusko',
'Kill The Noise','Fatboy Slim', 'Zomboy', 'A-Trak', 'James Blake',
'Morgan Page', 'The Bloody Beetroots', 'Quintino', 'Wolfgang Gartner',
'Bakermat', 'M83', 'Pretty Lights', 'Cedric Gervais',
'Sunnery James & Ryan Marciano', 'Baauer', 'Danny Avila', 'Justice',
'Seven Lions', 'Royksopp', 'Bondax', 'Zero 7', 'Lemaitre', 'Noisia',
'Gramatik', 'Thomas Gold', 'Basement Jaxx', 'Aphex Twin', 'Four Tet',
'Flying Lotus', 'Sidney Samson', 'Paul Kalkbrenner', 'Boards Of Canada',
'Maya Jane Coles', 'Groove Armada', 'Juan Magan', 'Chase & Status', 'BT',
'Digitalism', 'Mount Kimbie', 'Benga', 'Audien', 'Bassjackers',
'The Chainsmokers', 'DVBBS', 'Pete Tong', 'Deorro', 'DJ Snake',
'Don Diablo', 'Pendulum', 'Chris Lake', 'Dzeko & Torres', 'Zhu'
];
$('#dj-search .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'djs',
displayKey: 'value',
source: substringMatcher(djs)
});
});
</script>
</head>
<body>
<form id="search_bar" class="navbar-form navbar-left">
<div class="form-group" id="dj-search">
<input type="text" class="form-control typeahead" placeholder="Search favourite DJs" autocomplete="off">
</div>
</form>
</body>
</html>
如果我尝试使用相同的代码来处理我现有的HTML模板，我会继续错误
If I try to get the same code to work for my existing HTML template, I keep on getting the error
未捕获TypeError：undefined不是函数
就行了
$（'＃dj-search .typeahead'）。typeahead（{
可能导致此错误的原因是什么？
What could be causing this error?
以下是我的完整HTML
Below is my full HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>EDM Hunters | Top 100 DJs | Discover the Best of Electronic Dance Music</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Listen to, vote on and discover the Top Electronic Dance Music Songs by the Top DJs of the world">
<meta property="og:image" content="/static/img/edmlogo.jpg"/>
<link rel="shortcut icon" href="/static/img/favicon.ico">
<link href="/static/css/bootstrap.min.css" rel="stylesheet" type='text/css'/>
<link href="/static/css/bootstrap-theme.min.css" rel="stylesheet" type='text/css'/>
<link href="/static/css/style.css" rel="stylesheet" type='text/css'/>
<script type="text/javascript" src="/static/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/typeahead.bundle.min.js"></script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53a4066858ab24f0"></script>
<script type="text/javascript">
$(document).ready(function() {
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
// the typeahead jQuery plugin expects suggestions to a
// JavaScript object, refer to typeahead docs for more info
matches.push({ value: str });
}
});
cb(matches);
};
};
var djs = ['Hardwell', 'Armin van Buuren', 'Avicii', 'Tiesto', 'David Guetta',
'Dimitri Vegas & Like Mike', 'Nicky Romero', 'Steve Aoki', 'Afrojack',
'Dash Berlin', 'Skrillex', 'Deadmau5', 'Alesso', 'W&W', 'Calvin Harris',
'NERVO', 'Above & Beyond', 'Sebastian Ingrosso', 'Axwell', 'Aly & Fila',
'Markus Schulz', 'Daft Punk', 'Headhunterz', 'Zedd', 'Knife Party',
'Swedish House Mafia', 'Showtek', 'Andrew Rayel', 'Fedde Le Grand',
'Dyro', 'Laidback Luke', 'Paul van Dyk', 'ATB', 'Angerfist', 'Dada Life',
'Kaskade', 'Frontliner', 'Steve Angello', 'Sander Van Doorn',
'Martin Garrix', 'Porter Robinson', 'Ferry Corsten', 'Chuckie',
'Krewella', 'Coone', 'Carl Cox', 'Bobina', 'Omnia', 'Orjan Nilsen',
'Zatox', 'Gareth Emery', 'Bingo Players', 'Infected Mushroom',
'Eric Prydz', 'Tommy Trash', 'Wildstylez', 'Arty', 'R3hab', 'Madeon',
'Vicetone', 'Brennan Heart', 'DJ Feel', 'Gunz For Hire', 'Diplo',
'Tenishia', 'Noisecontrollers', 'Mike Candys', 'DJ Antoine',
'Quentin Mosimann', 'Project 46', 'Blasterjaxx', 'D-Block & S-te-Fan',
'Dillon Francis', 'Dannic', 'Adaro', 'Richie Hawtin', 'Martin Solveig',
'Felguk', 'Myon & Shane 54', 'Cosmic Gate', 'Heatbeat', "John O'Callaghan",
'Wasted Penguinz', 'Tiddey', 'Skazi', 'Da Tweekaz', 'Tenashar',
'Bob Sinclar', 'Benny Benassi', 'Stafford Brothers', 'DJ BL3ND',
'Paul Oakenfold', 'Mat Zo', 'Diego Miranda', 'DJs From Mars', 'Matt Darey',
'UMEK', 'Solarstone', 'Ummet Ozcan', 'Ran-D', 'Disclosure', 'Rudimental',
'Flux Pavilion', 'Nero', 'Datsik', 'Moby', 'Zeds Dead', 'The Prodigy',
'Bassnectar', 'Adventure Club', 'Dirty South', 'Borgore', 'Modestep',
'Bonobo', 'Feed Me', 'Flosstradamus', 'The Glitch Mob', 'Rusko',
'Kill The Noise','Fatboy Slim', 'Zomboy', 'A-Trak', 'James Blake',
'Morgan Page', 'The Bloody Beetroots', 'Quintino', 'Wolfgang Gartner',
'Bakermat', 'M83', 'Pretty Lights', 'Cedric Gervais',
'Sunnery James & Ryan Marciano', 'Baauer', 'Danny Avila', 'Justice',
'Seven Lions', 'Royksopp', 'Bondax', 'Zero 7', 'Lemaitre', 'Noisia',
'Gramatik', 'Thomas Gold', 'Basement Jaxx', 'Aphex Twin', 'Four Tet',
'Flying Lotus', 'Sidney Samson', 'Paul Kalkbrenner', 'Boards Of Canada',
'Maya Jane Coles', 'Groove Armada', 'Juan Magan', 'Chase & Status', 'BT',
'Digitalism', 'Mount Kimbie', 'Benga', 'Audien', 'Bassjackers',
'The Chainsmokers', 'DVBBS', 'Pete Tong', 'Deorro', 'DJ Snake',
'Don Diablo', 'Pendulum', 'Chris Lake', 'Dzeko & Torres', 'Zhu'
];
$('#dj-search .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'djs',
displayKey: 'value',
source: substringMatcher(djs)
});
});
</script>
</head>
<body>
<div id="edmhunters_body">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="edm" src="/static/img/edmlogo.png" alt="EDM Hunters logo"/></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#"><strong>Top 100 DJs</strong></a>
</li>
<li>
<a href="/explore/"><strong>Explore More DJs</strong></a>
</li>
<li>
<a href="/genres/"><strong>Browse by Genres</strong></a>
</li>
<li>
<a href="/monthly/"><strong>Monthly Top Songs</strong></a>
</li>
<li>
<a href="/trending/"><strong>Trending Songs</strong></a>
</li>
</ul>
<form id="search_bar" class="navbar-form navbar-left">
<div class="form-group" id="dj-search">
<input type="text" class="form-control typeahead" placeholder="Search favourite DJs" autocomplete="off">
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron" style="color:white;background-color:#252525;">
<h1>EDM Hunters</h1>
<p>EDM Hunters is a place where you can listen to and discover the Top Electronic Dance Music Songs by the Top DJs of the world. Don't agree with a list? Vote for your favourite song. What's your #1?</p>
<p><a class="btn btn-primary btn-lg" role="button" href="/faq/">Learn more</a></p>
</div>
<div class="col-md-11">
<div class="row dj_row">
<div class="col-md-2 col-md-offset-1 text-center dj-md-2">
<p><strong>#1 Hardwell</strong></p>
<a href="/hardwell/"><img src="/static/img/1.jpg" class="img-rounded dj_img" alt="Hardwell"/></a>
</div>
<div class="col-md-2 text-center dj-md-2">
<p><strong>#2 Armin van Buuren</strong></p>
<a href="/armin-van-buuren/"><img src="/static/img/2.jpg" class="img-rounded dj_img" alt="Armin van Buuren"/></a>
</div>
<div class="col-md-2 text-center dj-md-2">
<p><strong>#3 Avicii</strong></p>
<a href="/avicii/"><img src="/static/img/3.jpg" class="img-rounded dj_img" alt="Avicii"/></a>
</div>
<div class="col-md-2 text-center dj-md-2">
<p><strong>#4 Tiesto</strong></p>
<a href="/tiesto/"><img src="/static/img/4.jpg" class="img-rounded dj_img" alt="Tiesto"/></a>
</div>
<div class="col-md-2 text-center dj-md-2">
<p><strong>#5 David Guetta</strong></p>
<a href="/david-guetta/"><img src="/static/img/5.jpg" class="img-rounded dj_img" alt="David Guetta"/></a>
</div>
</div>
<div class="row dj_row">
<div class="col-md-2 col-md-offset-1 text-center dj-md-2">
<p><strong>#6 Dimitri Vegas & Like Mike</strong></p>
<a href="/dimitri-vegas-and-like-mike/"><img src="/static/img/6.jpg" class="img-rounded dj_img" alt="Dimitri Vegas & Like Mike"/></a>
</div>
<div class="col-md-2 text-center dj-md-2">
<p><strong>#7 Nicky Romero</strong></p>
<a href="/nicky-romero/"><img src="/static/img/7.jpg" class="img-rounded dj_img" alt="Nicky Romero"/></a>
</div>
<div class="col-md-2 text-center dj-md-2">
<p><strong>#8 Steve Aoki</strong></p>
<a href="/steve-aoki/"><img src="/static/img/8.jpg" class="img-rounded dj_img" alt="Steve Aoki"/></a>
</div>
<div class="col-md-2 text-center dj-md-2">
<p><strong>#9 Afrojack</strong></p>
<a href="/afrojack/"><img src="/static/img/9.jpg" class="img-rounded dj_img" alt="Afrojack"/></a>
</div>
<div class="col-md-2 text-center dj-md-2">
<p><strong>#10 Dash Berlin</strong></p>
<a href="/dash-berlin/"><img src="/static/img/10.jpg" class="img-rounded dj_img" alt="Dash Berlin"/></a>
</div>
</div>
<div class="endless_container">
<a class="endless_more" href="/?page=2"
rel="page">more</a>
<div class="endless_loading" style="display: none;"><img src="/static/img/ajax-loader.gif" style="margin-left:535px;margin-top:25px;" alt="loading"/></div>
</div>
<script src="/static/js/jquery-1.9.1.js"></script>
<script src="/static/js/endless-pagination.js"></script>
<script>
$.endlessPaginate({
paginateOnScroll: true,
paginateOnScrollMargin: 130
});
</script>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
<div id="disclaimer">
<p>*Rankings according to <a href="http://www.djmag.com/top100?year=2013" target="_blank">DJ Mag Top 100 DJs 2013</a></p>
</div>
<footer>
<span id=copy class='pull-right'><strong>© EDM Hunters 2014</strong></span>
<a href="/contact/" id="contactus" class='pull-right'>Contact us</a>
<a href="/faq/" id="faq" class="pull-right">FAQ</a>
<div class="clearfix"></div>
</footer>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53a4066858ab24f0"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47063606-1', 'edmhunters.com');
ga('send', 'pageview');
</script>
</body>
</html>
推荐答案
如评论中所述：此问题已通过以下方式解决：原始海报。 undefined不是函数意味着 typeahead 属性实际上是未定义的 - 因此它不能作为函数调用运行。通常这表示加载插件时出现问题，但是：
As discussed in the comments: this problem was solved by the original poster. "undefined is not a function" means that the typeahead property was actually undefined - so it can't be run as a function call. Normally this indicates a problem with the loading of the plugin, but:
- 在jQuery之后加载了typeahead插件，
- 控制台上没有错误表明插件没有加载。
最后，页面中正在加载另一个jQuery副本。所以jQuery加载到 head ，然后加载了typeahead插件（使 $（'foo'）。typeahead（） available）...然后加载第二个副本，擦除扩展的jQuery函数。当 document.ready 调用被解雇时，第二个jQuery被使用，导致错误。
In the end, another copy of jQuery was being loaded in the page. So jQuery was loading in the head, then the typeahead plugin was loading (making $('foo').typeahead() available)... and then the second copy was loading, wiping out the extended jQuery function. When the document.ready call fired it was this second jQuery that got used, resulting in the error.
这篇关于未捕获的TypeError：undefined不是函数 - typeahead.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！