Bootstrap - “未捕获的TypeError:undefined不是函数”

时间:2015-03-30 20:40:20

标签: javascript jquery twitter-bootstrap

许多人遇到的问题,但我无法弄明白。

我在Chrome开发者工具中收到以下错误:

  

未捕获的TypeError:undefined不是 ----- 的函数   bootstrapwizard.js:3

     

(匿名函数) ----- jquery-1.11.2.min.js:2

     

m.Callbacks.j ----- jquery-1.11.2.min.js:2

     

m.Callbacks.k.fireWith ----- jquery-1.11.2.min.js:2

     

m.extend.ready ----- jquery-1.11.2.min.js:2 J

我尝试了以下内容:

1)将脚本移动到自己的js文件

2)替换我包含“jQuery”,“Bootstrap”和“script”

的地方

3)搜索在线解决方案

你能帮我解决这个问题吗?

感谢

The page can be found here. Its on Norwegian, but the bar is on English.

标题

 <!-- jQuery --->
        <script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.11.2.min.js"></script>
        <?php wp_enqueue_script("jquery"); ?>

        <!-- Boostrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

        <!-- jQuery scrips -->
        <script src="<?php bloginfo('stylesheet_directory'); ?>/js/hideheader.js"></script>
        <script src="<?php bloginfo('stylesheet_directory'); ?>/js/bootstrapwizard.js"></script>

        <?php wp_head(); ?>

的jQuery

$(document).ready(function() {
        $('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index+1;
            var $percent = ($current/$total) * 100;
            $('#rootwizard').find('.bar').css({width:$percent+'%'});
        }});
    });

HTML

   <div class="container">
    <div id="rootwizard">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
        <ul>
            <li><a href="#tab1" data-toggle="tab">First</a></li>
            <li><a href="#tab2" data-toggle="tab">Second</a></li>
            <li><a href="#tab3" data-toggle="tab">Third</a></li>
            <li><a href="#tab4" data-toggle="tab">Forth</a></li>
            <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
            <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
            <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
        </ul>
         </div>
          </div>
        </div>
    <div id="bar" class="progress progress-striped active">
      <div class="bar"></div>
    </div>
    <div class="tab-content">
        <div class="tab-pane" id="tab1">
          1
        </div>
        <div class="tab-pane" id="tab2">
          2
        </div>
        <div class="tab-pane" id="tab3">
            3
        </div>
        <div class="tab-pane" id="tab4">
            4
        </div>
        <div class="tab-pane" id="tab5">
            5
        </div>
        <div class="tab-pane" id="tab6">
            6
        </div>
        <div class="tab-pane" id="tab7">
            7
        </div>
        <ul class="pager wizard">
            <li class="previous first" style="display:none;"><a href="#">First</a></li>
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next last" style="display:none;"><a href="#">Last</a></li>
            <li class="next"><a href="#">Next</a></li>
        </ul>
    </div>  
</div>
</div>

1 个答案:

答案 0 :(得分:3)

在您描述的页面中,没有调用bootstrapWizard.js文件, 您需要将其添加到您的scrips中,或者从CDN链接加载它,例如:

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.js

编辑:调用bootstrapWizard,但它不是同一个文件。它只包含“onload”功能。