为什么按钮单击事件会导致站点以 Bootstrap 形式重新加载？答案

【问题标题】：Why would a button click event cause site to reload in a Bootstrap form?为什么按钮单击事件会导致站点以 Bootstrap 形式重新加载？
【发布时间】：2014-05-02 04:33:56
【问题描述】：

我在divs 上使用jQuery 的show() 和hide() 函数来编码或模拟不同连续的表单部分。

我制作了一个按钮，当它被点击时隐藏div。奇怪的是，一旦按钮被点击，页面会重新加载并回到最开始显示的div$(document).ready()。

更奇怪的是，如果在点击“continuar”按钮之前先点击导航栏文本，就不会出现上面提到的这个问题（然后会出现预期的页面而无需重新加载并再次显示第一页）。

可以在此处访问表单：

http://registropsicologos.maricelaaguilarflores.com:20791

蓝色按钮是造成页面重新加载问题的原因，除非您在点击“continuar”之前点击导航栏上的 Visualizar。

我不明白为什么会发生这种情况，我之前使用过.show() 和.hide()，但没有发生这个问题。

以下是相关的 JavaScript 代码：

$(document).ready(function () {

    mostrarFormularioRegistro()

    $(".btnSeccion").click(function() {
        btnMostrarSeccion($(this))
    })
})

function mostrarFormularioRegistro () {

    $("#formularioRegistro").show()
    mostrarSeccion(1)
    $("#DB").hide()

}

function mostrarSeccion (seccion) {

    for (var i = 1; i <4; i++) {
        if (i===seccion)
            $("#seccionRegistro"+i).show()
        else
            $("#seccionRegistro"+i).hide()
    }
}

function btnMostrarSeccion (idBtnSeccion) {

    var seccion = parseInt(idBtnSeccion.attr("id").slice(-1))
    if (seccion == 3)
        mostrarSeccion(1)
    else
        mostrarSeccion(seccion+1)

}

这是正文标记：

<body>

    <div class="container" id="proyecto">

        <ul class="nav nav-tabs">
          <li class="active"><a href="#">Registrar</a></li>
          <li><a href="#">Visualizar</a></li>
        </ul>

    </div>

    <div id="formulario">

        <div class="container" id="seccionRegistro1">
            <form class="form-horizontal" role="form">

              <div class="form-group">
                <label for="inputNombre" class="col-sm-2 control-label">Nombre(s)</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputNombre" placeholder="Nombre(s)">
                </div>
              </div>

              <div class="form-group">
                <label for="inputApellidos" class="col-sm-2 control-label">Apellidos</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputApellidos" placeholder="Apellidos">
                </div>
              </div>

              <div class="form-group">
                <label for="inputEdad" class="col-sm-2 control-label">Edad</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputEdad" placeholder="Apellidos">
                </div>
              </div>

              <div class="form-group">
                <label for="inputTel" class="col-sm-2 control-label">Teléfono</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputTel" placeholder="Teléfono">
                </div>
              </div>

              <div class="form-group">
                <label for="inputCel" class="col-sm-2 control-label">Celular</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputCel" placeholder="Celular">
                </div>
              </div>

                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-primary btnSeccion" id="btnSeccion1">Continuar</button>
                </div>

            </form>
        </div>

        <div class="container" id="seccionRegistro2">
            <form class="form-horizontal" role="form">

              <div class="form-group">
                <label for="inputEscolaridad" class="col-sm-2 control-label">Escolaridad</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputEscolaridad" placeholder="Escolaridad">
                </div>
              </div>

              <div class="form-group">
                <label for="inputAlmaMater" class="col-sm-2 control-label">Egresado de</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputAlmaMater" placeholder="Egresado de">
                </div>
              </div>

              <div class="form-group">
                <label for="inputAñoEgreso" class="col-sm-2 control-label">Año de egreso</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputAñoEgreso" placeholder="Año de egreso">
                </div>
              </div>

              <div class="form-group">
                <label for="inputCedula" class="col-sm-2 control-label">Cédula Profesional</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputCedula" placeholder="Cédula Profesional">
                </div>
              </div>

              <div class="form-group">
                <label for="checkPosgrado" class="col-sm-2 control-label">Estudios de Posgrado</label>
                <div class="col-sm-1">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> Sí
                    </label>
                  </div>
                </div>
                <div class="col-sm-8">
                    <div class="row">
                      <div class="col-xs-4">
                        <input type="text" class="form-control" placeholder="Posgrado" id="inputPosgrado1">
                      </div>
                      <div class="col-xs-4">
                        <input type="text" class="form-control" placeholder="Posgrado" id="inputPosgrado2">
                      </div>
                      <div class="col-xs-4">
                        <input type="text" class="form-control" placeholder="Posgrado" id="inputPosgrado3">
                      </div>
                    </div>
                </div>
              </div>


              <div class="form-group">
                <label for="inputCedula" class="col-sm-2 control-label">Cédula Profesional</label>
                <div class="col-sm-10">
                  <label class="checkbox-inline">
                  <input type="checkbox" id="inputAreaTrabajoClinica" value="option1"> Clínica
                  </label>
                  <label class="checkbox-inline">
                  <input type="checkbox" id="inputAreaTrabajoSocial" value="option1"> Social
                  </label>
                  <label class="checkbox-inline">
                  <input type="checkbox" id="inputAreaTrabajoLaboral" value="option1"> Laboral
                  </label>
                  <label class="checkbox-inline">
                  <input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"> Educativa
                  </label>                    
                </div>
              </div>

              <div class="form-group">
                <label for="inputTrabajo" class="col-sm-2 control-label">Institución de trabajo</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputTrabajo" placeholder="Institución de trabajo">
                </div>
              </div>

              <div class="form-group">
                <label for="trabajoIndependiente" class="col-sm-2 control-label">Desarrollo Profesional Independiente</label>
                <div class="col-sm-1">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" id="trabajoIndependiente"> Sí
                    </label>
                  </div>
                </div>
                <div class="col-sm-8">
                    <div class="row">
                      <div class="col-xs-6">
                        <input type="text" class="form-control" placeholder="Actividad independiente" id="inputActividadIndependiente1" disabled="true">
                      </div>
                      <div class="col-xs-6">
                        <input type="text" class="form-control" placeholder="Actividad independiente" id="inputActividadIndependiente2" disabled="true">
                      </div>                          
                    </div>
                </div>
              </div>        

              <div class="form-group">
                <label for="checkPosgrado" class="col-sm-2 control-label">Actividades de trabajo no relacionadas con la psicología</label>
                <div class="col-sm-1">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" id="actividadesAjenasPsicologia"> Sí
                    </label>
                  </div>
                </div>
                <div class="col-sm-8">
                    <div class="row">
                      <div class="col-xs-6">
                        <input type="text" class="form-control" placeholder="Actividad" id="actividadNoPsicologia1" disabled="true">
                      </div>
                      <div class="col-xs-6">
                        <input type="text" class="form-control" placeholder="Actividad" id="actividadNoPsicologia2" disabled="true">
                      </div>                          
                    </div>
                </div>
              </div>

                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-primary btnSeccion" id="btnSeccion2">Continuar</button>
                </div>

            </form>
        </div>

        <div class="container" id="seccionRegistro3">
            <form class="form-horizontal" role="form">

                  <div class="form-group">
                    <label for="actividadesInteres" class="col-sm-2 control-label">Actvidades profesionales en las que le gustaría participar</label>
                    <div class="col-sm-10">
                      <label class="checkbox-inline">
                      <input type="checkbox" id="inputAreaTrabajoClinica" value="option1"> Conferencias y encuentros
                      </label>
                      <label class="checkbox-inline">
                      <input type="checkbox" id="inputAreaTrabajoSocial" value="option1"> Cursos
                      </label>
                      <label class="checkbox-inline">
                      <input type="checkbox" id="inputAreaTrabajoLaboral" value="option1"> Talleres
                      </label>
                      <label class="checkbox-inline">
                      <input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"> Diplomados
                      </label>
                          <label class="checkbox-inline">
                      <input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"> Maestría
                      </label>
                          <label class="checkbox-inline">
                      <input type="checkbox" id="inputAreaTrabajoEducativa" value="option1"> Doctorado
                      </label>                            
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="capacitacionInteres" class="col-sm-2 control-label">Areas de la psicología en las que le gustaría capacitarse</label>
                    <div class="col-sm-10">
                      <label class="checkbox-inline">
                      <input type="checkbox" id="inputAreaTrabajoClinica" value="Clínica"> Clínica
                      </label>
                      <label class="checkbox-inline">
                      <input type="checkbox" id="inputAreaTrabajoSocial" value="Social"> Social
                      </label>
                      <label class="checkbox-inline">
                      <input type="checkbox" id="inputAreaTrabajoLaboral" value="Laboral"> Laboral
                      </label>
                      <label class="checkbox-inline">
                      <input type="checkbox" id="inputAreaTrabajoEducativa" value="Educativa"> Educativa
                      </label>
                          <label class="checkbox-inline">
                      <input type="checkbox" id="inputAreaTrabajoEducativa" value="Todas"> Todas
                      </label>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="inputNombre" class="col-sm-2 control-label">¿Alguna temática en particular que le gustaría conocer o capacitarse?</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="inputInteresCapacitacion" placeholder="Temática de interés">
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="checkPosgrado" class="col-sm-2 control-label">¿Pertenece a alguna agrupación relacionada con el campo de la psicología?</label>
                    <div class="col-sm-1">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" id="actividadesAjenasPsicologia"> Sí
                        </label>
                      </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="row">
                          <div class="col-xs-6">
                            <input type="text" class="form-control" placeholder="Actividad" id="Agrupación" disabled="true">
                          </div>
                          <div class="col-xs-6">
                            <input type="text" class="form-control" placeholder="Actividad" id="Agrupación" disabled="true">
                          </div>                          
                        </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="checkPosgrado" class="col-sm-2 control-label">¿Ha participado con anterioridad en algún evento de la Asociación de Psicólogos de Tuxtepec?</label>
                    <div class="col-sm-1">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" id="participacionEventos"> Sí
                        </label>
                      </div>
                    </div>
                    <div class="col-sm-8">
                        <select multiple class="form-control" id="eventosAsistidos">
                          <option value="abrazoterapia">Abrazoterapia</option>
                          <option value="tallerMujeres">Taller autoestima mujeres</option>
                        </select>
                    </div>
                  </div>

                  <p class="bg-success">

                        ¿Le gustaría pertenecer como miembro activo de la Asociación de Psicólogos de Tuxtepec, A.C. "Manos Unidas por un vivir más pleno?" &nbsp;&nbsp;&nbsp;&nbsp;
                            <label>
                              <input type="checkbox" id="idInteresMiembro"><strong>Sí</strong>
                            </label>

                  </p>

                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-primary btnSeccion" id="btnSeccion3">Continuar</button>
                </div>

                </form>
            </div>
    </div>
</body>

【问题讨论】：

我检查了你提供的网址，它没有在任何按钮点击时重新加载页面。如果你能详细说明到底发生了什么。因为我没有在任何按钮上看到任何回发
天哪，这更奇怪了……我用的是谷歌浏览器，你呢？ @KrunalPatil
.show() 和 .hide() 不可能导致页面重新加载或更改位置。相反，您的点击很可能是在提交表单，因为您没有明确阻止它。
使用，因为

标签： javascript jquery html

【解决方案1】：

<button> 标签默认使用提交行为。因此，您的页面会在单击按钮时提交表单，这看起来像是页面刷新本身。要解决此问题，您可以使用input 标签

<input type="button" class="btn btn-primary btnSeccion" id="btnSeccion3" value="Continuar"/>

做同样的效果。或者您可以在按钮的单击事件处理程序（如果这是您想要的）中取消提交，如下所示：

$(".btnSeccion").click(function(event) {
    btnMostrarSeccion($(this));
    event.preventDefault();
})

【讨论】：

谢谢！我现在会检查它，我相信它会得到解决。我的问题真的值得 -2 吗？
我刚刚注册了 Stackoverflow 并看到了您的问题。所以我有点新。我是不是偶然做了-2？我认为我没有投反对票。
我投了反对票，因为 "jQuery .show 和 .hide 函数导致网站重新加载？" 可以通过简单地删除显示和隐藏来排除...
好吧，我同意@KevinB 的这个论点。我只是真的以为是这样，无法相信为什么。我什至会更改标题，以便将来对其他人有所帮助
最好是 JavaScript jQuery，还有 ASP.NET 和 SharePoint。

【解决方案2】：

最简单的解决方案是在按钮元素中添加一个简单的“type”属性，如下所示：

<button type="button" class="btn btn-default" onclick="...">My Button</button>

当指示按钮元素专门来自 type=button 时，它将停止像提交按钮一样操作，并且不会提交（因此，刷新）当前页面。

【讨论】：

我可以验证这个不能一直有效。你确定你的 onclick 不会返回 false 吗？
实际上，我并没有使用“onclick”属性，只是选择了“type=button”属性定义，这样就可以了。如果按钮仍然提交包含它的表单，出于某种原因，您可以随时尝试“onclick”解决方法或单击事件代码中的“preventDefault”方式，等等。

【解决方案3】：

我多次遇到这个问题。无论是使用 angular、bootstrap 还是任何其他 js 插件有时它可以在桌面浏览器上完美运行，但无法在移动浏览器或触摸屏智能手机上达到目的。

因为按钮标签默认具有提交行为。

最简单的解决方案是使用type="button"
这样就可以解决问题，否则使用js停止提交页面。

【讨论】：

【解决方案4】：

以下代码（来自引导模板）不能更改为 <input> 标记。当在 chrome 上像三星 S4 一样运行时和在我实际的三星 S5 上运行时，它有同样的问题。单击按钮展开菜单会导致页面回发。我不确定这是否也会发生在其他浏览器和模型上，但我怀疑它会发生。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

我通过简单地将onclick="return false;" 添加到按钮标签中来解决此问题。

【讨论】：

【解决方案5】：

问题是<button>等元素有默认的提交动作，如果你想让它们像普通按钮一样指定type="button"默认是type="submit"

【讨论】：

【解决方案6】：

当我将<button> 更改为<input> 时，页面停止重新加载。

【讨论】：

欢迎来到 Stack Overflow！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请编辑您的答案以添加解释并说明适用的限制和假设。
@PerplexingParadox 我认为这不是答案。
这篇文章并不是回答问题的实际尝试。请注意Stack Overflow doesn't work like a discussion forum，这是一个问答网站，每个帖子都是问题或问题的答案。帖子也可以有comments——像这样的小句子——可以用来批评或要求作者澄清。这应该是评论或new question。

【解决方案7】：

没有 jquery（受 Sreenath H B 启发）：

设置点击监听器：

submitButton.addEventListener("click", onSubmitClicked);

防止重新加载：

function onSubmitClicked(event){
    event.preventDefault();
    // Your code   
}

【讨论】：

【解决方案8】：

我尝试使用 type="button" 并将 onclick 设置为返回 false。这适用于大多数浏览器和大多数平台，但在 f.x 中失败。 iPad Air 2 和 Edge。

对我有用的最简单的解决方案是使用表单外部的按钮使其不受它的影响，或者使用type=button 的输入。

按钮似乎也忽略了表单上的onsubmit="return false"。

这是一个非常烦人且难以重现的错误。它适用于大多数事情，但在一个特定的浏览器/平台组合上突然中断。

【讨论】：