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

Question

很多人都有这个问题，但我无法弄清楚。

我在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）搜索在线解决方案

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

谢谢

该页面可以在这里找到。 它在挪威语，但酒吧是英语。

头

 <!-- 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>

Answer 1

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

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

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