jQuery: accedere agli elementi dopo una richiesta AJAX

Gli elementi creati a seguito di una richiesta AJAX effettuata con jQuery non sono direttamente accessibili al di fuori del metodo usato per reperirli. Questo avviene perchè i metodi AJAX di jQuery creano una sandbox intorno a ciò che viene restituito da AJAX. Se si vogliono utilizzare questi elementi e operare su di essi, dobbiamo utilizzare quegli eventi specifici che hanno luogo dopo che la richiesta è stata completata.

Possiamo utilizzare l'evento complete:

var action = function() {
	$('#ajax-element').click(function() {
		alert('Test');
	});
};

$.ajax({
	type: 'GET',
	dataType: 'html',
	url: 'ajax.php',
	data: 'action=ajax',
	success: function(html) {
		$(html).appendTo('body');
		// Viene creato l'elemento #ajax-element
	},
	complete: action
});

Molti sviluppatori pensano che success e complete siano equivalenti ed infatti spesso utilizzano solo il primo evento. In realtà non è così. complete si attiva quando la transazione è completa ed ha luogo solo dopo l'evento success. Ecco perchè questo è l'evento ideale per operare sui dati AJAX una volta inseriti nella pagina.