为什么下一个按钮在模式窗口中不起作用？

Question

我使用Twitter Bootstrap Wizard Plugin在模态窗口中有多个步骤的表单，它很好地显示了这些步骤，并且如果我单击其中的一个步骤会更改为其他步骤，但是当我按“下一步”或“上一步”时“什么都不做。

我尝试添加：

$('#rootwizard').bootstrapWizard({'nextSelector': '.button-next', 'previousSelector': '.button-previous'});

现在这是代码：

$(document).ready(function() {
  var $validator = $("#wizard").validate({
    rules: {
      // Paso 1
      nombreAlmacen: {
        required: true
      },
      NCamaras: {
        required: true,
        number: true
      },
      // Paso 2
      nombreCamara: {
        required: true,
      },
      NZonas: {
        required: true,
        number: true
      },
      //Paso 3
      nombreZona: {
        required: true
      },
    },
    messages: {
      nombreAlmacen: "Introduzca el nombre del Almacén",
      NCamaras: "Introduzca el número de Camaras",
      nombreCamara: "Introduzca el nombre de Cámara",
      NZonas: "Introduzca el número de zonas",
      nombreZona: "Introduzca el nombre de la Zona"
    },
    highlight: function(element) {
      $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function(element) {
      $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
      if (element.parent('.input-group').length) {
        error.insertAfter(element.parent());
      } else {
        error.insertAfter(element);
      }
    }
  });

  $('#bootstrap-wizard').bootstrapWizard({
    'tabClass': 'form-bootstrapWizard',
    'onNext': function(tab, navigation, index) {
      var $valid = $("#wizard").valid();
      if (!$valid) {
        $validator.focusInvalid();
        return false;
      } else {
        $('#bootstrap-wizard').find('.form-wizard').children('li').eq(index - 1).addClass(
          'complete');
        $('#bootstrap-wizard').find('.form-wizard').children('li').eq(index - 1).find('.step')
          .html('<i class="fa fa-check"></i>');
      }
    }
  });

  // fuelux wizard
  var wizard = $('.wizard').wizard();

  wizard.on('finished', function(e, data) {
    //$("#fuelux-wizard").submit();
    //console.log("submitted!");
    $.smallBox({
      title: "Se ha introducido el Almacén exitosamente",
      content: "<i class='fa fa-clock-o'></i> <i>Hace 1 segundo...</i>",
      color: "#5F895F",
      iconSmall: "fa fa-check bounce animated",
      timeout: 4000
    });
  });
});

.com {
  color: #93a1a1;
}

.lit {
  color: #195f91;
}

.pun,
.opn,
.clo {
  color: #93a1a1;
}

.fun {
  color: #dc322f;
}

.str,
.atv {
  color: #D14;
}

.kwd,
.prettyprint .tag {
  color: #1e347b;
}

.typ,
.atn,
.dec,
.var {
  color: teal;
}

.pln {
  color: #48484c;
}

.prettyprint {
  padding: 8px;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}

.prettyprint.linenums {
  -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
  -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
  box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}


/* Specify class=linenums on a pre to get line numbering */

ol.linenums {
  margin: 0 0 0 33px;
  /* IE indents via margin-left */
}

ol.linenums li {
  padding-left: 12px;
  color: #bebec5;
  line-height: 20px;
  text-shadow: 0 1px 0 #fff;
}

<script src="https://github.com/VinceG/twitter-bootstrap-wizard/blob/master/prettify.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://github.com/VinceG/twitter-bootstrap-wizard/blob/master/jquery.bootstrap.wizard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="widget-grid" class="">
  <div class="row">
    <article class="col-sm-12 col-md-12 col-lg-12">
      <header>
        <h2>Creación de Almacén</h2>
      </header>
      <div>
        <!-- widget edit box 
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box 
        </div>
        <!-- end widget edit box -->
        <div class="widget-body">
          <div class="row">
            <form id="wizard" novalidate="novalidate">
              <div id="bootstrap-wizard" class="col-sm-12">
                <div class="form-bootstrapWizard">
                  <ul class="bootstrapWizard form-wizard">
                    <li class="active" data-target="#step1">
                      <a href="#tab1" data-toggle="tab"> <span class="step">1</span> <span class="title">Creación de almacén</span> </a>
                    </li>
                    <li data-target="#step2">
                      <a href="#tab2" data-toggle="tab"> <span class="step">2</span> <span class="title">Creación de cámaras</span> </a>
                    </li>
                    <li data-target="#step3">
                      <a href="#tab3" data-toggle="tab"> <span class="step">3</span> <span class="title">Creación de zonas</span> </a>
                    </li>
                    <li data-target="#step4">
                      <a href="#tab4" data-toggle="tab"> <span class="step">4</span> <span class="title">Resumen</span> </a>
                    </li>
                  </ul>
                  <div class="clearfix"></div>
                </div>
                <div class="tab-content">
                  <div class="tab-pane active" id="tab1">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-id-card fa-lg fa-fw"></i></span>
                            <input class="form-control input-lg" placeholder="Nombre de Almacén" type="text" name="nombreAlmacen" id="nombreAlmacen" style="height: 50px; font-size:21px;" autocomplete="off" maxlength="20" value="@Model.Nombre">
                          </div>
                        </div>
                      </div>
                    </div>
                    <br />
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-bars fa-lg fa-fw"></i></span>
                            <input class="form-control input-lg" placeholder="Descripción del Almacén" type="text" name="descripcionAlmacen" id="descripcionAlmacen" style="height: 50px; font-size:21px;" autocomplete="off" maxlength="50" value="@Model.Descripcion">
                          </div>
                        </div>
                      </div>
                    </div>
                    <br />
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-columns fa-lg fa-fw"></i></span>
                            <input class="form-control input-lg" placeholder="Número de Camaras" type="number" name="NCamaras" id="NCamaras" style="height: 50px; font-size:21px;" autocomplete="off" value="@Model.NCamaras">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane" id="tab2">
                    <br>
                    <div class="row">
                      <div class="col-md-12 col-lg-12">
                        <h4>Cámara X</h4>
                      </div>
                      <div class="col-md-4 col-lg-3">
                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-id-card fa-lg fa-fw"></i></span>
                            <input class="form-control input-lg" placeholder="Nombre" type="text" name="nombreCamara" id="nombreCamara" style="height: 50px; font-size:21px;" autocomplete="off" maxlength="20" value="@Model.Nombre">
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4 col-lg-4">
                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-bars fa-lg fa-fw"></i></span>
                            <input class="form-control input-lg" placeholder="Descripción" type="text" name="descripcionCamara" id="descripcionCamara" style="height: 50px; font-size:21px;" autocomplete="off" maxlength="50" value="@Model.Descripcion">
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4 col-lg-3">
                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-columns fa-lg fa-fw"></i></span>
                            <input class="form-control input-lg" placeholder="Capacidad" type="number" name="Capacidad" id="Capacidad" style="height: 50px; font-size:21px;" autocomplete="off" value="@Model.NZonas">
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4 col-lg-2">
                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-columns fa-lg fa-fw"></i></span>
                            <input class="form-control input-lg" placeholder="Zonas" type="number" name="NZonas" id="NZonas" style="height: 50px; font-size:21px;" autocomplete="off" value="@Model.NZonas">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane" id="tab3">
                    <div class="row">
                      <div class="col-md-12 col-lg-12">
                        <h4>Cámara X Zona Y</h4>
                      </div>
                      <br />
                      <div class="col-md-4 col-lg-4">
                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-id-card fa-lg fa-fw"></i></span>
                            <input class="form-control input-lg" placeholder="Nombre de la Zona" type="text" name="nombreZona" id="nombreZona" style="height: 50px; font-size:21px;" autocomplete="off" maxlength="20" value="@Model.Nombre">
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4 col-lg-4">
                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-bars fa-lg fa-fw"></i></span>
                            <input class="form-control input-lg" placeholder="Descripción de la Zona" type="text" name="descripcionZona" id="descripcionZona" style="height: 50px; font-size:21px;" autocomplete="off" maxlength="50" value="@Model.Descripcion">
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4 col-lg-4">
                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-columns fa-lg fa-fw"></i></span>
                            <input class="form-control input-lg" placeholder="Número de Ubicaciones" type="number" name="NUbicaciones" id="NUbicaciones" style="height: 50px; font-size:21px;" autocomplete="off">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane" id="tab4">
                    <br>
                    <div class="row">
                      <div class="col-md-12 col-lg-12">
                        <h4>Ubicación X</h4>
                      </div>
                      <br />
                      <div class="col-md-4 col-lg-4">
                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-id-card fa-lg fa-fw"></i></span>
                            <input class="form-control input-lg" placeholder="Nombre de la Ubicación" type="text" name="nombreUbicación" id="nombreUbicación" style="height: 50px; font-size:21px;" autocomplete="off" maxlength="20" value="@Model.Nombre">
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4 col-lg-4">
                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-bars fa-lg fa-fw"></i></span>
                            <input class="form-control input-lg" placeholder="Descripción de la Ubicación" type="text" name="descripcionUbicación" id="descripcionUbicación" style="height: 50px; font-size:21px;" autocomplete="off" maxlength="50" value="@Model.Descripcion">
                          </div>
                        </div>
                      </div>
                      <div class="col-md-4 col-lg-4">
                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-columns fa-lg fa-fw"></i></span>
                            <input class="form-control input-lg" placeholder="Capacidad" type="number" name="capacidad" id="capacidad" style="height: 50px; font-size:21px;" autocomplete="off" value="@Model.NUbicaciones">
                          </div>
                        </div>
                      </div>
                    </div>
                    <br>
                  </div>
                  <div class="form-actions">
                    <div class="row">
                      <div class="col-sm-12">
                        <ul class="pager wizard no-margin">
                          <li class="previous disabled">
                            <a href="javascript:void(0);" class="btn btn-lg btn-default"> Anterior </a>
                          </li>
                          <li class="next">
                            <a href="javascript:void(0);" class="btn btn-lg txt-color-darken"> Siguiente </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <!-- end widget div
      </div>
      <!-- end widget -->
    </article>
  </div>
</section>

我尝试将按钮<a>更改为<input>，更改名称，id和值，使用其他方式调用该按钮，并使用jquery进行调用，显示console.log消息，try / cath ，踢一下电脑并爱抚它，但是任何操作都不起作用。

知道发生了什么吗？

Answer 1

我正在使用局部视图来显示表单，并且位于其中：

@using (Html.BeginForm()){html code}

这将在我的表单中创建一个新表单，因为那样，我永远找不到正确的表单，并且总是指向错误的表单。只需删除所有内容即可。