[JQUERY] funzione che non va su dati caricati via ajax

[metatad]

Ho una funzione:

$(document).ready(function() {
$('.open').click(function () {
    var slide = "#d"+this.id.replace('a','');
    $(slide).animate({"height": "show"}, { duration: 500 });
    });
$('.close').click(function () {
    var slide = "#d"+this.id.replace('c','');
    $(slide).animate({"height": "hide"}, { duration: 500 });
    });
});

che fa egregiamente il suo dovere. Però la pagina in cui la utilizzo contiene molti dati che vengono caricati successivamente, via AJAX. Su questi dati, che costruiscono elementi HTML di pagina - benché assolutamente corretti - la funzione non và.
In pratica, io ho una serie di immagini con class open e id = aoff1 (il numero è progressivo), un'altra serie con class close e id = coff1 (sempre progressivo), ed una serie di livelli nascosti, con id = doff1 (etc).
Cliccando - ad es. - su aoff24 si apre lo slide del livello doff24, che poi si richiude cliccando su coff24. In questo modo, apro e chiudo decine, se non centinaia, di slide con un unica funzione di poche righe. E ripeto, funziona.
Però la pagina carica una serie di elementi via AJAX. Per cui se, poniamo, il primo elemento caricato è caratterizzato dal numero 25, avrò in pagina aoff25 che dovrebbe aprire lo slide del livello doff25, che poi si dovrebbe richiudere cliccando su coff25.
Invece da 25 in avanti non va!
Come se tutti gli elementi caricati via AJAX non potessero richiamare la funzione.
La cosa strana è che, precedentemente, invece di questa funzione, ne utilizzavo un'altra, che scriveva uno per uno tutti i singoli casi (una cosa come questa che segue):

function showSlidingDiv(quant){if (quant == 1100) {
$("#dett11").animate({"height": "show"}, { duration: 500 });
$("#mail11").animate({"height": "hide"}, { duration: 500 });
} else if (quant == 1200) {
$("#dett12").animate({"height": "show"}, { duration: 500 });
$("#mail12").animate({"height": "hide"}, { duration: 500 });
} else if (quant == 1300) {
$("#dett13").animate({"height": "show"}, { duration: 500 });
$("#mail13").animate({"height": "hide"}, { duration: 500 });
} else if ...

e funzionava perfettamente anche con gli elementi caricati via AJAX!
Da cosa può dipendere, e soprattutto come posso risolvere?

[cavicchiandrea]

$('body').on('click', '.close', function () {.....})

[metatad]

Provato (vedi sotto) ma non funziona nemmeno quello che funzionava prima...

$('body').on('click', '.close', function () {	var slide = "#d"+this.id.replace('a','');
	$(slide).animate({"height": "show"}, { duration: 500 });
});
$('body').on('click', '.close', function () {
	var slide = "#d"+this.id.replace('c','');
	$(slide).animate({"height": "hide"}, { duration: 500 });
});

[metatad]

Ho provato anche

$(document).on('click','.close',function(){...

ma niente!

[badaze]

Hai provato a mettere un alert(slide) per vedere i valori da 25 in poi ?

[metatad]

Risolto!

$(".open").live('click', function(){    
    var slide = "#d"+this.id.replace('a','');
    $(slide).animate({"height": "show"}, { duration: 500 });
    });
$(".close").live('click', function(){
    var slide = "#d"+this.id.replace('c','');
    $(slide).animate({"height": "hide"}, { duration: 500 });
    });

[cavicchiandrea]

Funziona con .live perché usi una librerai jquery vecchia, meglio se aggiorni la libreria e usi .on

[metatad]

uso la 1.10.3

[cavicchiandrea]

Con la verisone 10 .on deve funzionare essendo attivo dalla 7