No va en IE

mdk · #1 (**permalink**) 08/11/2011, 19:05

Hice siguiente código, que muestra una capa en la que carga una página en Ajax, según el link que pinches. En Firefox me va todo correctamente, pinche el link que pinche carga todo correctamente, pero en IE solo me deja seleccionar el link1, alguien sabe cuál puede ser el problema? Pongo aquí el código.

Código:

<html>
<head>
	<title>Lista de elementos</title>
<script src="../scripts/jquery.js" type="text/javascript"></script>	
<script language="javascript">
function UpdateDiv(Url, Capa){
	$('#'+Capa).css('display', 'block');
	$("#"+Capa+"c").css('display', 'inline');
	$("#"+Capa).load(Url, function(){
         $("#"+Capa+"c").css('display', 'none');
	});
	$("#"+Capa+"a").css('display', 'none');
	$("#"+Capa+"b").css('display', 'block');
};
$(document).ready(function(evento){
	$("#data #sel").click(function(){
		capa1 = "#"+$(this).attr('rel')+"a";
		capa2 = "#"+$(this).attr('rel')+"b";
		url = $(this).attr('href');
		rel = $(this).attr('rel');
		$(capa1).click(function(){
			UpdateDiv(url, rel);
			return false;
		});
		$(capa2).click(function(){
			if ($("#"+rel).css('display')=='none') { $("#"+rel).css('display', 'block'); }
			else { $("#"+rel).css('display', 'none'); }
			end;
		});
	});
});
</script>
</head>
<body>
<div id="data">
	<div style="width: 100%; background-color: red;" id="data1a" onmouseover="this.style.cursor='pointer'"><div id="sel" href="archivo1.php" rel="data1">Link 1</div></div>
	<div style="width: 100%; background-color: red; display: none;" id="data1b" onmouseover="this.style.cursor='pointer'"><div onmouseout="javascript:new.style.cursor='pointer'" id="sel" rel="data1">Link 1</div></div>
	<div id="data1c" style="display: none;">Cargando..</div>
	<div id="data1" style="display: none;"></div>
	<div style="width: 100%; background-color: red;" id="data2a" onmouseover="this.style.cursor='pointer'"><div id="sel" href="archivo2.php" rel="data2">Link 2</div></div>
	<div style="width: 100%; background-color: red; display: none;" id="data2b" onmouseover="this.style.cursor='pointer'"><div id="sel" rel="data2">Link 2</div></div>
	<div id="data2c" style="display: none;">Cargando..</div>
	<div id="data2" style="display: none;"></div>
	<div style="width: 100%; background-color: red;" id="data3a" onmouseover="this.style.cursor='pointer'"><div id="sel" href="archivo3.php" rel="data3">Link 3</div></div>
	<div style="width: 100%; background-color: red; display: none" id="data3b" onmouseover="this.style.cursor='pointer'"><div id="sel" rel="data3">Link 3</div></div>
	<div id="data3c" style="display: none;">Cargando..</div>
	<div id="data3" style="display: none;"></div>
</div>

Si desean probarlo, basta con añadir el archivo jquery, y crear los archivos archivo1.php archivo2.php y archivo3.php.

Gracias.

mdk · #2 (**permalink**) 09/11/2011, 16:02

Al final lo he solucionado simplificando código, y dejandolo más depurado. Aquí dejo el código para quien le interese.

Código:

<html>
<head>
	<title>Selección de capas</title>
<link rel="stylesheet" type="text/css" href="scripts/estilo.css">
<script src="scripts/jquery.js" type="text/javascript"></script>	
<script language="javascript">
function UpdateDiv(url, id){
	$("#"+id+"a").css('display', 'none');
	$("#"+id+"b").css('display', 'block');
	$("#"+id+"c").css('display', 'inline');
	$('#'+id+"d").css('display', 'block');
	$("#"+id+"d").load(url, function(){
         $("#"+id+"c").css('display', 'none');
	});
};
$(document).ready(function(evento){
	$("#layer div").click(function(){
		id  = $(this).attr('id');
		url = $(this).attr('href');
		rel = $(this).attr('rel');
		if (id==rel+"a") {
			UpdateDiv(url, rel);
			return false;
		}else {
			$("#"+rel+"d").toggle(); 
		}
	});
});
</script>
</head>
<body>
<div id="layer">
	<div id="layer1a" rel="layer1" href="jquery/a1.php" class="layera" onmouseover="this.style.cursor='pointer'">Link 1</div>
	<div id="layer1b" rel="layer1" href="jquery/a1.php" class="layerb" onmouseover="this.style.cursor='pointer'">Link 1</div>
	<div id="layer1c" class="layerc">Cargando..</div>
	<div id="layer1d" class="layerc"></div>
	<div id="layer2a" rel="layer2" href="jquery/a2.php" class="layera" onmouseover="this.style.cursor='pointer'">Link 2</div>
	<div id="layer2b" rel="layer2" href="jquery/a2.php" class="layerb" onmouseover="this.style.cursor='pointer'">Link 2</div>
	<div id="layer2c" class="layerc">Cargando..</div>
	<div id="layer2d" class="layerc"></div>
	<div id="layer3a" rel="layer3" href="jquery/a3.php" class="layera" onmouseover="this.style.cursor='pointer'">Link 3</div>
	<div id="layer3b" rel="layer3" href="jquery/a3.php" class="layerb" onmouseover="this.style.cursor='pointer'">Link 3</div>
	<div id="layer3c" class="layerc">Cargando..</div>
	<div id="layer3d" class="layerc"></div>
</div>