Buenas a tod@s,
Muchas gracias Masterpuppet por tú respuesta. He estado mirandome el tema del
event.delegation que me has recomendado y en principio no parece demasiado complicado, aún así no me funciona. Pego el fragmento de código relacionado con el asunto por si podéis echarle un vistazo y darme algún consejo porqué no consigo encontrar porqué no me funciona:
HTML principal:
Código HTML:
<body>
<div id="centered">
<div id="background_header">
<div id="header"></div>
</div>
<div id="center" class="column">
<div id="center_header">
<span>INICIO</span>
</div>
<div id="center_body"></div> /* dentro de este div es donde actualizo con el request.HTML */
</div>
<div id="left" class="column">
<div id="menu"> // menu que acciona el request.HTML para que se actualice "center_body"
<ul>
<li><a href="/contenido/inicio.html" class="selected">INICIO</a><span class="icon_selected"></span></li>
<li><a href="/contenido/nosotros.html">SOBRE NOSOTROS</a><span></span></li>
<li><a href="/contenido/juegos.html">JUEGOS</a><span></span></li>
<li><a href="/contenido/fiestas.html">FIESTAS</a><span></span></li>
<li><a href="/contenido/actividades.html">ACTIVIDADES</a><span></span></li>
<li><a href="/contenido/excursiones.html">EXCURSIONES</a><span></span></li>
<li id="contacto"><a href="/contenido/contacto.html"><img src="imagenes/pixel.gif" />CONTACTO</a><span></span></li>
</ul>
</div>
</div>
<div id="footer">
<div id="fondo_footer">
</div>
</div>
</div>
</body>
HTML que cargo con el request en el HTML principal:
Código HTML:
<html>
<body>
<a href="#">holas</a> /* Este enlace lo he puesto para comprobar si no me funcionaba el event.delegation porque los enlaces no son hijos directos ( a pesar de haber leido en la web de mootools que aunque no sean hijos directos los elementos en cuestion deberia funconar, espero explicarme bien...) */
<div id="fondo_center_arriba">
<div id="inicio_left">
<h1>BIENVENIDOS</h1>
<h6><a href="/contenido/juegos.html" id="juegos">Juegos</a> · <a href="/contenido/fiestas.html">Fiestas</a> · <a href="/contenido/actividades.html">Actividades</a></h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div>
<div id="box_icon_left">
<div id="icon_left"></div>
<span>Nuestras juegos</span>
</div>
<div id="box_icon_right">
<div id="icon_right"></div>
<span>Nuestras actividades</span>
</div>
</div>
</div>
<div id="inicio_right"></div>
</div>
</body>
</html>
JS:
Código:
window.addEvent('domready', function(){
// event.delegation
var elementos = $('center_body');
document.id(elementos).addEvent('click:relay(a)', function(e, clic){
e.preventDefault();
alert('Has pulsado en un enlace cargado dinamicamente!');
clic.setStyle('color', '#777');
});
// fin event.delegation
// También he probado haciendolo con addEvents pero tampoco me ha funcionado :-/
$$('#menu li a').addEvents({
click: function(){
//menu principal.
if(this.hasClass('selected')){
return false;
} else {
$$('#menu li a').each(function(item, index){
item.removeClass('selected');
});
this.addClass('selected');
var siblings = this.getSiblings('span');
$$('#menu li span').each(function(item, index){
item.removeClass('icon_selected');
item.removeClass('icon_rollOver');
});
siblings.addClass('icon_selected');
var titulo = this.get('text');
$$('div#center_header span').set('text', titulo);
// Request contenido.
// alert(this.getProperty('href'));
var src = this.getProperty('href');
new Request.HTML({
url: src,
method: 'get',
onRequest: function (){
$$('body').addClass('busy');
},
onComplete: function (response){
$('center_body').empty().adopt(response);
$$('body').removeClass('busy');
}
}).send();
return false;
}
// Fin Request contenido.
},
mouseover: function(){
if(this.hasClass('selected')){
} else {
var sibling = this.getSiblings('span');
sibling.addClass('icon_rollOver');
}
},
mouseleave: function(){
if(this.hasClass('selected')){
} else {
var siblin = this.getSiblings('span');
siblin.removeClass('icon_rollOver');
}
}
})
});
Gracias de nuevo... y perdón por pegar todo este código.
Un saludo,
LaloP