gestori eventi per elementi aggiunti in secondo tempo [era: Problema JQuery]

[cadan2]

Salve,
Da poco utilizzo JQuery e ho un problema che non riesco a comprendere.
Ho una box con un carrello prodotti, affianco ad ogni elemento del carrello ho messo un cestino per eliminare un determinato prodotto.

All'atto del click su Aggiungi al Carrello su un prodotto, aggiorno con Ajax il carrello e lo rielaboro e rimetto il contenuto nel div con:

$("#carrello").html(data);

Ora quando carico la pagina e il carrello mi viene generato in Php il cestino mi funziona,
ma non appena ci aggiungo un elemento (e quindi me lo rielabora) se clicco sul cestino non mi fa alcun operazione.

$(document).ready(function(){
       $(".cestino").click(function() {
            alert("elimino un elemento");
       })
});

Questo è un semplice esempio dove gli elementi con class .cestino caricati dall'aggiornamento della pagina mi da l'alert, se poi vado ad inserire un elemento con .html() e clicco sul relativo cestino con class "cestino" ovviamente non mi stampa l'alert.
Io credo dipenda da $(document).ready però non so come fare, qualcuno sa aiutarmi?

Grazie

[Xinod]

http://forum.html.it/forum/showthrea...readid=1487327

[Xinod]

il tuo click copre gli elementi presenti nel documento al document.ready
per associare gestori eventi anche ad elementi non ancora presenti devi usare .on o, per vecchie versioni di jquery (<1.8 se non sbaglio), .live

occhio ai titoli

ciao

[lucavizzi]

Devi fare un'assegnazione live.
http://api.jquery.com/on/

[cassano]

Originariamente inviato da lucavizzi
Devi fare un'assegnazione live.
http://api.jquery.com/on/

Scusate ma dalla documentazione leggo .

.click() =This method is a shortcut for .on( "click", handler )

Quindi non è la stessa cosa come ha fatto lui ?

[Xinod]

in quella forma certo, ma leggendo la documentazione di .on ti accorgi che e' piu' di un alternativa a .click

da qui in poi
"Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time."

[cadan2]

Ho provato poco fà a fare

$(document).ready(function(){
       $(".cestino").on('click', function() {
            alert("elimino un elemento");
       })
});

ma stessa cosa, ugualmente non funziona per quelli aggiunti dopo con JQuery/Ajax.... come posso provare?

ps. Xinod hai ragione il titolo utilizzato è molto vago, ma non sapevo come chiamare questo problema

[cavicchiandrea]

Prova cosi

$(document).ready(function(){
       $("body").on('click', ".cestino", function() {
            alert("elimino un elemento");
       })
});

[cadan2]

Grazie Andrea,
cosi funziona sia per quelli caricati in primo luogo sia per quelli successivamente innestati con JQuery.