【发布时间】：2013-04-09 10:56:35
【问题描述】：
我正在尝试实现 Fuelux 的向导功能，但遇到了障碍。我只是想实现live example 的工作副本，但在我的控制台中不断收到错误：
Uncaught TypeError: Object [object Object] has no method 'wizard'
我发现很多文档有点让人不知所措，希望能用简单 [或更简单] 的英语清楚地说明这个主题。
我的标记是：
<!DOCTYPE html>
<html class="no-js fuelux">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>E-Learning</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fuelux.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div id="my-wizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">
...
</div>
<div class="step-pane" id="step2">
...
</div>
<div class="step-pane" id="step3">
...
</div>
</div>
</div>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/require.js"></script>
<script src="js/wizard.js"></script>
<script>
$(document).ready(function(){
$('#my-wizard').on('change', function(e, data) {
console.log('change');
if(data.step===3 && data.direction==='next') {
// return e.preventDefault();
}
});
$('#my-wizard').on('changed', function(e, data) {
console.log('changed');
});
$('#my-wizard').on('finished', function(e, data) {
console.log('finished');
});
$('.btn-prev').on('click', function() {
console.log('prev');
$('#my-wizard').wizard('previous');
});
$('.btn-next').on('click', function() {
console.log('next');
$('#my-wizard').wizard('next','foo');
});
});
</script>
</body>
</html>
【问题讨论】：
-
根据标题，这意味着您要么没有添加所需的wizard.js 文件，要么试图在加载wizard.js 之前调用
wizard。我想我有点困惑，因为我假设您需要在父元素上调用.wizard才能让它出现，对吗？这就是你的全部代码吗？ -
你包含 require.js 但不使用它？
-
@Snuffleupagus：根据他给我们的代码，情况并非如此。而是加载或执行失败。
-
@Bergi 如果其他地方的脚本有错误，控制台会显示这样的错误
-
我根据其他示例包含了 require.js... 直到收到错误消息，指出某些内容未定义...。这就是所有代码，是的。
标签： javascript jquery twitter-bootstrap fuelux