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:
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.$("#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(){ }); });
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