solucion - ¿problema de jquery show()/hide() en Internet Explorer?
jquery hide show div (3)
El siguiente código html funciona en Firefox, pero por alguna razón falla en IE (no se muestra Label2). ¿Es eso un error o extraño algo?
Cualquier ayuda sería apreciada.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript">
</script>
<script>
jQuery(document).ready(function(){
function setVis(){
var val = $("#check").is(":checked");
if (val)
$("#g_1").show();
else
$("#g_1").hide();
}
setVis();
$("#check").change(setVis);
});
</script>
</head>
<body>
<span>
<input type="checkbox" id="check" />
<label>Label1</label>
</span>
<span id="g_1">
<label>Label2</label>
</span>
</body>
</html>
Cambie el evento .change por el evento .click. el resultado en ambos buscadores es el mismo. en IE al hacer clic en la casilla de verificación, no se produjo el desenfoque.
Porque:
Por MSDN, el evento de cambio es
... disparado cuando los contenidos están comprometidos y no mientras el valor está cambiando. Por ejemplo, en un cuadro de texto, este evento no se dispara mientras el usuario está escribiendo, sino más bien cuando el usuario confirma el cambio dejando el cuadro de texto que tiene el foco.
El comportamiento de las casillas de verificación es similar: en IE, el evento no se dispara hasta que se elimina el foco del elemento (pruébalo: haz clic en la pestaña de la casilla de verificación y el comportamiento es el esperado). Firefox aparentemente no respeta esta distinción.
Solución:
Use el controlador de eventos click lugar de change :
$("#check").click(setVis);
... y el comportamiento debería ser coherente en todos los navegadores.
Recuerde que el evento onchange se activa después de marcar la casilla de verificación y luego dejar la casilla de verificación . ¿Intentó comprobarlo y luego hacer clic en algún otro lugar del documento?
Puede utilizar los eventos de clic y pulsación de tecla en jQuery (para marcar el recuadro mediante el clic y la barra espaciadora).
<sidequestion> ¿Hay alguna razón por la que declare / defina una función dentro de su párrafo listo para documentos, en lugar de fuera de él? </sidequestion>
Una edición más; puedo recomendar este código más elegante:
jQuery(document).ready(function(){
$("#g_1").hide();
$("#check").change(function() { $("#g_1").toggle(); });
});