Funciones jquery despues de cargar datos con ajax

Seguro que más de uno se ha encontrado con el problema de que las funciones javascript o jquery han dejado de funcionar en elementos cargados con ajax, esto es debido a que las funciones son asociados a los elementos una vez la página es cargada, si más adelante cargas elementos con ajax estas funciones no se verán asociadas con dichos elementos.

Para dar solución a estos problemas propongo 2 opciones:

Cargar las funciones de nuevo después de realizar la carga con ajax, es decir:

$('.clase').submit( function(){
var id = $(this).attr('id');
// Enviamos la información usando AJAX
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
// Mostramos un mensaje con la respuesta de PHP
success: function(data) {
$('#comentarios'+id).html(data);
cargarDeNuevoLasFunciones();
}
})
return false;
 });
$('.formComment').live( 'submit', function(){
  var id = $(this).attr('id');
  // Enviamos la información usando AJAX
  $.ajax({
  	type: 'POST',
  	url: $(this).attr('action'),
  	data: $(this).serialize(),
  	// Mostramos un mensaje con la respuesta de PHP
  	success: function(data) {
  		$('#comentarios'+id).html(data);
  		recalcularMasonry();
  	}
  })
  return false;
});

La función .live() de jQuery nos permite cargar contenido con ajax y si este debía tener alguna función asociada a los elemntos jQuery la asocia automáticamente.

2 pensamientos en “Funciones jquery despues de cargar datos con ajax”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *