Ayuda con Ajax y jQuery
hola, soy incapaz de hacer que el contenido que cargo via ajax con el .load() de jquery mantenga las propiedades. Para manejar eventos futuros está el .live() y/o .delegate() pero por más que lea al respecto no lo entiendo.
el código al que quiero añadir la "funcionalidad" por si alguien se anima a explicarme la solución.
$(document).ready(function() {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function(){
//Set Variables
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
//Toggle Teaser
$("a.collapse").click(function(){
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});
});//Close Function
LA REFERENCIAhttp://designm.ag/tutorials/image-rotator-css-jquery/
Ferdev
Hola,
No me ha quedado muy claro lo que necesitas. Creo que tu problema, es que cargas html vía AJAX en la estructura de la página, y a ese nuevo html quieres asignarle una serie de eventos/propiedades.
Si eso es lo que quieres, este ejemplo te podría servir para entenderlo mejor:
En primer lugar, tenemos un archivo .html con el código html que queremos cargar mediante el método load de jquery.
<a id="link" href="#">Link</a>Símplemente contendrá un elemento anchor normal, con un id.
Y ahora el html principal, con el código javascript que te interesa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Domestika</title>
<style type="text/css" media="screen">
body{
margin: 0;
padding: 0;
background-color: #DDE052;
}
div{
width: 200px;
height: 200px;
margin: 10px;
border: 3px solid white;
text-align: center;
}
a{
font-family: Helvetica, Arial;
color: white;
line-height: 200px;
}
div#container{
background-color: #2367E1;
}
div#target{
background-color: #F06C14;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Asociamos al primer link, un manejador para el evento 'onclick'
$('a#action').click(function(evt){
evt.preventDefault();
// Cargamos el contenido de partial.html, en la capa #target
$('div#target').load('partial.html', function(){
// En este punto, el enlace #link ya ha sido añadido a la capa #target
// Accedemos a él y le asignamos un manejador para el evento 'onclick', y le asignamos un atributo 'title'
$('a#link')
.click(function(evt){
evt.preventDefault();
alert('Funciona!');
})
.attr('title', 'Este link lanza un alert');
});
});
});
</script>
</head>
<body>
<div id="container">
<a id="action" href="#">Add content</a>
</div>
<div id="target">
</div>
</body>
</html>
También se podría haber hecho usando el método live... En ese caso, el html principal quedaría así:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Domestika</title>
<style type="text/css" media="screen">
body{
margin: 0;
padding: 0;
background-color: #DDE052;
}
div{
width: 200px;
height: 200px;
margin: 10px;
border: 3px solid white;
text-align: center;
}
a{
font-family: Helvetica, Arial;
color: white;
line-height: 200px;
}
div#container{
background-color: #2367E1;
}
div#target{
background-color: #F06C14;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Asociamos al primer link, un manejador para el evento 'onclick'
$('a#action').click(function(evt){
evt.preventDefault();
// Cargamos el contenido de partial.html, en la capa #target
$('div#target').load('partial.html', function(){
// En este punto, el enlace #link ya ha sido añadido a la capa #target
// Accedemos a él y le asignamos un atributo 'title'
$('a#link').attr('title', 'Este link lanza un alert');
});
});
// En este punto, el elemento 'a#link' todavía no existe.
// Puedes comprobarlo ejecutando un alert($('a#link').length == 0); o con console.debug($('a#link').length == 0) si usas firebug;
// Por qué funciona este método? Porque cuando se crea un elemento que cumpla el selector 'a#link',
// automáticamente le asigna el manejador del evento 'onclick' que estamos definiendo aquí:
$('a#link').live('click', function(evt){
evt.preventDefault();
alert('Funciona!');
});
});
</script>
</head>
<body>
<div id="container">
<a id="action" href="#">Add content</a>
</div>
<div id="target">
</div>
</body>
</html>
Cual escoger de los dos? Yo prefiero evitar el método live si es posible. Pero si el código es muy complejo, el método live simplifica mucho el código, y lo hace más legible y mantenible.
Espero haberte ayudado. Saludos!
abrandlincoln
@Ferdev gracias por tomarte el tiempo de explicarme la historia, el tema ('click') solucionado.
El problema ahora son estas 2 primeras líneas que no tienen asignado ningún evento pero que son necesarias para el correcto funcionamiento de la galería de imagenes que estoy cargando en la página (es la parte de descripción de las imágenes que tiene un slideToggle con show/hide)
Ojalá pudiera pasarte el link con la beta pero me lo tienen prohibido :(
$(document).ready(function() {
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
Repito, gracias!
pd:lo del loovrs.com funciona?
Ferdev
Mmm, entonces, a ver si te he entendido ahora. En una página, llamemosla xxxx.html, estás cargando mediante el método 'load' de jQuery, un image rotator que está en la página yyyy.html, y lo estás cargando en la capa 'div#target', por ejemplo. Algo así:
$('div#target').load('yyyy.html');
Si es eso lo que estás haciendo, ese código que me pegas no te va a funcionar. $(document).ready se ejecuta cuando el código de la página principal (en este caso, la página xxxx.html) se ha terminado de cargar. Por tanto, ese código javascript nunca se ejecutará. Para eso, tienes que ejecutar el código javascript en la página xxxx.html, en la función 'callback' del método 'load'. Algo así:
$('div#target').load('yyyy.html', function(){
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
// etc...
});
Espero que sea eso lo que necesitas... Sino, me rindo ;-)
Saludos!
abrandlincoln
Sí funciona :) O al menos, debería! ;-)
abrandlincoln
Gracias Ferdev. Me pongo con ello!
( has entendido perfecto y explicado mejor ;)
Ferdev
Me alegro! :) Ya contarás qué tal :)