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.