javascript - Bootstrap - "Uncaught TypeError: undefined is not a function"

Question

一个很多人都遇到过的问题，但我想不通。

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

Uncaught TypeError: undefined is not a function ----- bootstrapwizard.js:3

(anonymous function) ----- 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>

Answer 1

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

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

编辑:有一个对 bootstrapWizard 的调用，但它不是同一个文件。它只包含它的“onload”函数。