Tema: (jquery) - Problema al utilizar el método .load desde el div de carga
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 30/09/2010, 09:31
Dany_s
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años
Puntos: 65
Respuesta: (jquery) - Problema al utilizar el método .load desde el div de carga
porque como agregas elementos dinamicamente son elementos nuevos que no tienen asignados los eventos click, entonces usa el evento live http://api.jquery.com/live/

vos tenes en todas las páginas una estructura igual no?
yo cuando es algo genérico que en todas las páginas tengo el mismo menú, un div con un id donde va el contenido y si siempre quiero cargar el contenido de ese div en un mismo lugar hago un evento en una clases, como en los link, recupero el href, traigo el contenido y lo musestro en un contenedor, y aparte de eso me funciona sin javascript activado

por ejemplo tengo un index y 3 paginas todas con la misma estructura

index.jsp
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  4.   <script>
  5.     $( function (){
  6.         $('.linkAjax').live('click', function(){
  7.             url = $(this).attr('href');
  8.             $('#contenedor').load(url+' #contenido');
  9.             return false;
  10.         });
  11.     });
  12.   </script>
  13. </head>
  14. <body>
  15.     <div id="menu">
  16.         <a href="index.jsp" class="linkAjax">Inicio</a>
  17.         <a href="uno.jsp" class="linkAjax">Uno</a>
  18.         <a href="dos.jsp" class="linkAjax">Dos</a>
  19.         <a href="tres.jsp" class="linkAjax">Tres</a>
  20.     </div>
  21.     <div id="contenedor">
  22.         <div id="contenido">
  23.             Mi inicio
  24.         </div>
  25.     </div>
  26. </body>
  27. </html>

uno.html
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  4. </head>
  5. <body>
  6.     <div id="menu">
  7.         <a href="index.jsp" class="linkAjax">Inicio</a>
  8.         <a href="uno.jsp" class="linkAjax">Uno</a>
  9.         <a href="dos.jsp" class="linkAjax">Dos</a>
  10.         <a href="tres.jsp" class="linkAjax">Tres</a>
  11.     </div>
  12.     <div id="contenedor">
  13.         <div id="contenido">
  14.             Página categoría UNO
  15.         </div>
  16.     </div>
  17. </body>
  18. </html>

dos.html
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  4. </head>
  5. <body>
  6.     <div id="menu">
  7.         <a href="index.jsp" class="linkAjax">Inicio</a>
  8.         <a href="uno.jsp" class="linkAjax">Uno</a>
  9.         <a href="dos.jsp" class="linkAjax">Dos</a>
  10.         <a href="tres.jsp" class="linkAjax">Tres</a>
  11.     </div>
  12.     <div id="contenedor">
  13.         <div id="contenido">
  14.             Página categoría DOS
  15.         </div>
  16.     </div>
  17. </body>
  18. </html>

tres.jsp
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  4. </head>
  5. <body>
  6.     <div id="menu">
  7.         <a href="index.jsp" class="linkAjax">Inicio</a>
  8.         <a href="uno.jsp" class="linkAjax">Uno</a>
  9.         <a href="dos.jsp" class="linkAjax">Dos</a>
  10.         <a href="tres.jsp" class="linkAjax">Tres</a>
  11.     </div>
  12.     <div id="contenedor">
  13.         <div id="contenido">
  14.             Página categoría TRES
  15.         </div>
  16.     </div>
  17. </body>
  18. </html>

salvo que no agregué los eventos en todas las páginas porque en realidad va en un archivo js aparte para que también si alguien accede a dos.jsp va a seguir funcionar