我在show()上使用 jQuery 的hide()和divs函数，以便代码或模拟不同的连续表格部分。
我点击了一个隐藏div的按钮。奇怪的是，一旦点击按钮，页面将重新加载并返回到第一个$(document).ready()所示的div。
更奇怪的是，如果在单击“继续”按钮之前单击导航栏文本，则不会发生上述问题（然后预期页面将显示而不重新加载并再次显示第一页）。
可以在此处访问该表单：
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?"
<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>
答案 0 :(得分：41)
默认情况下，<button>标记使用“提交”行为。因此，当单击按钮时，您的页面会提交表单，这看起来像页面刷新本身。要解决此问题，您可以使用input代码
<input type="button" class="btn btn-primary btnSeccion" id="btnSeccion3" value="Continuar"/>
做同样的效果。或者您可以在按钮的单击事件处理程序中取消提交（如果这是您想要的），如下所示：
$(".btnSeccion").click(function(event) {
btnMostrarSeccion($(this));
event.preventDefault();
})
答案 1 :(得分：19)
最简单的解决方案是在按钮元素中添加“ type ”的简单属性，如下所示：
SELECT DISTINCT
(ROUND (windspeed * 2, -1) / 2) AS wndspd,
SUM (
CASE
WHEN TO_CHAR (observationtime, 'YYYY') = 1957 THEN 1
ELSE NULL
END)
AS given_year,
SUM (
CASE
WHEN TO_CHAR (observationtime, 'YYYY') = 1958 THEN 1
ELSE NULL
END)
AS GIVEN_YEAR2
FROM table1
WHERE platformid = 'coollocation'
AND networktype = 'typeofcoollocation'
AND (windspeedqc <> '2' OR windspeedqc IS NULL)
GROUP BY ROUND (windspeed * 2, -1) / 2
ORDER BY ROUND (windspeed * 2, -1) / 2;
当指示按钮元素具体来自 type = button 时，它将停止像提交按钮一样，并且不会提交（因此，刷新）当前页面。
答案 2 :(得分：2)
以下代码（来自引导程序模板）无法更改为<input＆gt;虽然标签。它在使用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;"添加到按钮标记中来修复此问题。
答案 3 :(得分：2)
我多次面对这个问题。 是否使用angular，bootstrap或任何其他js插件 有时它可以在桌面浏览器上完美运行，但无法在移动浏览器或触摸屏智能手机上实现这一目的。
由于按钮标签默认具有提交行为。
最简单的解决方案是使用type="button"
这将解决问题，否则使用js停止提交页面。
答案 4 :(得分：1)
问题是try {
CertificateFactory cf = CertificateFactory.getInstance("X.509");
InputStream caInputLeaf = context.getResources().openRawResource(leafCert);
InputStream caInputInter = context.getResources().openRawResource(interCert);
try {
if (cf != null) {
ca = cf.generateCertificate(caInputLeaf);
URL url = new URL(URL);
HttpsURLConnection conn = (HttpsURLConnection) url.openConnection();
conn.setRequestMethod("GET");
conn.connect();
chain = conn.getServerCertificates();
if(chain!=null && chain[0].equals(ca)) { //Return Leaf certificate
return ca;
}
else{ //Return Intermediate certificate
ca = cf.generateCertificate(caInputInter);
return ca;
}
}
} catch (Exception cee) {
ca = cf.generateCertificate(caInputInter);
return ca;
}
} catch (Exception e) {
Log.e("EXCEPTION", e.toString());
}
等元素具有提交的默认操作，如果您想让它们像普通按钮一样指定<button>，则默认为type="button"
答案 5 :(得分：0)
没有jquery（灵感来自Sreenath H B）：
设置clicklistener：
submitButton.addEventListener("click", onSubmitClicked);
防止重装：
function onSubmitClicked(event){
event.preventDefault();
// Your code
}
答案 6 :(得分：0)
我尝试使用type="button"并设置onclick返回false。这适用于大多数浏览器和大多数平台，但在f.x中失败。 iPad Air 2和Edge有时也是。
最适合我的解决方案是使用表单外部的按钮，使其不受其影响，或使用type=button输入。
按钮甚至似乎也忽略了表单上的onsubmit="return false"。
这是一个非常烦人且难以重现的错误。它适用于大多数事情，但在一个特定的浏览器/平台组合上突然中断。
答案 7 :(得分：0)
当我将 <button> 更改为 <input> 时页面停止重新加载。