Hola. Como acá ya me han ayudado muchas veces vengo con otra duda para seguir aprendiendo.
Tengo un menú de acordeón con 4 opciones que se abren su contenido vía ajax en una div en index.php, y tengo un evento bind para cada una de ellas porque contienen scripts.
Código:
$("#opcion1").bind("click", function(){
$(".active").removeClass('active');
$(this).addClass('active');
$("#main").load("opcion1.php", function(){
});
});
$("#opcion2").bind("click", function(){
$(".active").removeClass('active');
$(this).addClass('active');
$("#main").load("opcion2.php", function(){
});
});
$("#opcion3").bind("click", function(){
$(".active").removeClass('active');
$(this).addClass('active');
$("#main").load("opcion3.php", function(){
});
});
$("#opcion4").bind("click", function(){
$(".active").removeClass('active');
$(this).addClass('active');
$("#main").load("opcion4.php", function(){
});
});
Como lo tengo ahorita, después de seleccionar una de las opciones no puedo seleccionar cualquier otra a menos que regrese a la página principal. Además, cuando selecciono la opción 1, tanto ésta como la opción 2 aparecen con la clase .active, y si selecciono la opción 2 aparece el contenido nuevo pero sin la clase .active. Sé que tiene qué ver con el bind pero no sé cómo corregirlo.
Hice un intento cambiando bind() por live() y entonces cada opción funciona pero las páginas tardan más en cargar y el menú se comporta extraño, se abre y cierra (es acordeón) intermitentemente hasta que la div carga por completo. Intenté con $(this).unbind("click"); pero seguramente lo hice mal porque no hubo cambio.
He leído algo de la documentación, algunos posts aquí y otros ejemplos pero lo que tengo es lo más lejos que he llegado así que vengo a preguntar a algún experto, que yo no lo soy. Espero que alguien me pueda guiar en la dirección correcta o referirme algún tutorial.
P.S. Y espero que éste sea el foro correcto para mi problema