Ver Mensaje Individual
  #3 (permalink)  
Antiguo 16/09/2012, 03:07
gebremswar
 
Fecha de Ingreso: enero-2012
Ubicación: Santiago de Surco, Lima - Perú
Mensajes: 266
Antigüedad: 12 años, 9 meses
Puntos: 57
Información Respuesta: problemas con los eventos jquery al usar ajax

Hola itnas87, Bienvenido Foros del Web.

La primera pregunta ya la respondió autonotel.

Cita:
Iniciado por itnas87 Ver Mensaje
me gustaria saber si eso ay alguna forma de solucionarlo ya sea alguna version de jquery u otra coasa con tal de no tener q crear las funciones y volver a llamarlas ...
Ahora. Como solucionarlo? Pues hace bastante tiempo encontré muchas soluciones a este problema aquí en el foro, como por ejemplo estas dos:
  1. Cargar un fichero javascript con el método .getScript() de JQuery a finalizar una llamada asíncrona con ajax.
  2. Utilizar el socorrido método .live() de JQuery (actualmente obsoleto) para poder capturar los eventos de los elementos añadidos asíncronamente.

Entonces... ¿Cual escoger?

El primero lo utilizaba para cargar nuevamente el .js y que considere los nuevos elementos.

En cuanto al segundo, dejé de utilizarlo rotundamente cuando leí el siguiente artículo: Porqué no debemos usar nunca jQuery Live.

Lo mejor es utilizar el método .on() para asociar eventos. Puedes leer sobre dicho método y su contrario/complementario .off() para eliminar eventos en este artículo.

Te doy una idea de como utilizar .on() con el siguiente ejemplo.

Código Javascript:
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>@GBreagan</title>
  6. <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  7. <script>
  8. var newLink = '<a class="lnk" href="#">[Clickme!]</a> <br>';
  9. $(document).on('ready',function() {
  10.     $('#myLinks').on('click', 'a.lnk', function(event){
  11.         event.preventDefault();
  12.         alert('Clicked!');
  13.     });
  14.     $('#add').on({
  15.         click:function(){
  16.             $('#myLinks').append(newLink);
  17.         }
  18.     });
  19. });
  20. </script>
  21. </head>
  22. <body>
  23. <input type="button" id="add" value="Add new link">
  24. <div id="myLinks">
  25.    
  26. </div>
  27. </body>
  28. </html>

<!-- EDITO-->
Necesitas como mínimo la versión 1.7 de JQuery para hacer uso de .on() y .off().
<!--/EDITO -->

Última edición por gebremswar; 16/09/2012 a las 03:15