javascript - Twitter 引导向导 TypeError : container is undefined

Question

使用 Twitter 引导向导，单击“下一个”V 形图标时，我在控制台中收到“TypeError:容器未定义”错误。尽管出现错误，向导仍显示下一个选项卡。是什么导致了这个错误？

Firefox 59.0.2 控制台错误:

bootstrap.js:3768:

fiddle :https://jsfiddle.net/dlo33/8hw5t4j8

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#wizard">Launch</button>

<div id="wizard" class="modal fade" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      </div>
      <div class="modal-body welcome-modal-body">
        <div id="rootwizard">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="container">
                <ul class="nav nav-pills">
                  <li class="nav-item"><a class="nav-link" href="#tab1" data-toggle="tab">Tab 1</a></li>
                  <li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">Tab 2</a></li>
                  <li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">Tab 3</a></li>
                  <li class="nav-item"><a class="nav-link" href="#tab4" data-toggle="tab">Tab 4</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div id="bar" class="progress progress-danger progress-striped active">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="1" aria-valuemax="100" style="width: 0%"></div>
          </div>
          <div class="tab-content">
            <div class="tab-pane" id="tab1">
              <h3>Some text in tab 1</h3>
            </div>
            <div class="tab-pane" id="tab2">
              <h3>Some text in tab 2</h3>
            </div>
            <div class="tab-pane" id="tab3">
              <h3>Some text in tab 3</h3>
            </div>
            <div class="tab-pane" id="tab4">
              <h3>Some text in tab 4</h3>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer justify-content-between welcome-modal-footer">
        <button id="button-previous" type="button" class="btn button-previous mr-auto" name='previous' value='Previous'><span class="fa fa-chevron-left"></span></button>
        <button id="button-next" type="button" class="btn button-next ml-auto" name='next' value='Next' data-toggle="tab"><span class="fa fa-chevron-right"></span></button>
        <button id="button-finish" type="submit" class="btn button-finish ml-auto" name='finish' value='Finish'>Finish</button>
      </div>
    </div>
  </div>
</div>

JS

// set up navigation buttons
var next = document.getElementById("wizard").getElementsByClassName("button-next");
var previous = document.getElementById("wizard").getElementsByClassName("button-previous");
var finish = document.getElementById("wizard").getElementsByClassName("button-finish");

// set up bootstrap wizard
$('#rootwizard').bootstrapWizard({
  'nextSelector': next,
  'previousSelector': previous,
  onTabShow: function(tab, navigation, index) {
    var $total = navigation.find('li').length;
    var $current = index + 1;
    var $percent = ($current / $total) * 100;

    if ($percent === 0) {
      $percent = (1 / $total) * 100;
    }
    $('#rootwizard .progress-bar').css({
      width: $percent + '%'
    });

    if ($current <= 1) {
      $(previous).add(finish).css({
        'display': 'none'
      });
      $(next).css({
        'display': 'block'
      });
      $(next).removeClass('disabled');
    } else if ($current < $total) {
      $(previous).add(next).css({
        'display': 'block'
      });
      $(finish).css({
        'display': 'none'
      });
    } else {
      $(next).css({
        'display': 'none'
      });
      $(previous).add(finish).css({
        'display': 'block'
      });
    }
  }
});

$('#rootwizard').bootstrapWizard({
  'tabClass': 'nav nav-pills'
});
$('#welcomeWizard').modal('show');

chrome 66.0.3359.139 中出现 Fiddle 错误:

Answer 1

您为何将 data-toggle="tab" 添加到下一个按钮？只要放下它，错误就会消失。

jsfiddle