evento su elemento creato dinamicamente

gigi.bg

evento su elemento creato dinamicamente

Ciao a tutti, di nuovo qui in cerca di aiuto. Sono alle prese con i primi passi nell'apprendimento di ajax e jquery ed eccomi subito in difficoltà. Vi spiego cosa vorrei e cosa succede.
Ho una pagina html in cui è presente un campo input questo campo che se compilato ed inviato salva il dato nel db e lo aggiunge all'elenco di quelli già presenti. Accanto a queste voci dell'elenco ho messo delle imagini che svolgono la funzione di bottoni uno per la modifica della voce dell'elenco e l'altra per l'eliminazione, e qui sorgono i problemi.
Cosa succede quando io inserisco la nuova voce premendo sull'immagine "aggiungi":
recupero il valore dell'input e lo invio alla pagina php che me lo salva nel db;
al "success" creo un nuovo div in cui inserisco:
-il testo appena salvato,
-e uno span in cui ho l'immagine per l'elimina con tanto di classe per far si che sia selezionabile con la voce $(".elimina") su cui ho messo l'evento che mi cancella la voce cliccata dal db.

Tutto questo al caricamento della pagina funziona correttamente, quindi se carico la pagina e vedo un voce dell'elenco che voglio cancellare clicco sull'immagine canc che fa attivare l'evento sulla classe "elimina" e la voce scompare. Se invece vado a cliccare sull'immagine canc dello sapn elimina creata dinamicamente al success del salvataggio nel db questa non funzione seppure abbia anche lei la class elimina correttamente impostata... come mai? dove sbaglio? vi posto anche il codice probabilmente è un po' pasticciato ma pian piano imparerò ciao e grazie


$(".add").click(function(e){
    
    var idGm = valoreInserito;
    var _this = $(this);
    
    $.ajax({
        type: 'post',
        url:'saveAjax.php',
        dataType: 'json',
        data: {'id' : idGm},
        success: function(data){
            var newDiv = $('<div></div>').attr('id',data.id).addClass('trTable sub italic').text(data.mnt).insertBefore(_this.parent('div'));
            var newSpan = $('<span></span>').addClass('edit');
            var newImg = $('<img>').attr('src','images/comuni/edit.png').attr('alt','edit');
            var newSpanElm = $('<span></span>').addClass('elmSub');
            var newImgElm = $('<img>').attr('src','images/comuni/elm.png').attr('alt','del').attr('title','rimuovi');
       
            newSpanElm.append(newImgElm);
            newSpan.append(newImg);
            newDiv.append(newSpan);
            newDiv.append(newSpanElm);
        }
    });
    e.preventDefault();
});

$(".elmSub").click(function(e){
    
    var _this = $(this);
    
    var id = $(this).parent('div').attr('id');
    
    $.ajax({
        type: 'post',
        url:'saveAjax.php',
        dataType: 'json',
        data: {'id' : id, 'action' : 'del'},
        success: function(){
            _this.parent('div').fadeOut();
        }
    });
});

gionaf

Ciao, per agganciare un "listener" ad un elemento generato dinamicamente devi usare il metodo "on":
api.jquery.com/on/

Crea un oggetto jQuery con l'elemento che contiene ".elmSub", poi passi ".elmSub" come selettore, così:

$('#contenitore').on('click','.elmSub',function(){
[INDENT]
/* qua il codice per rimuovere il div */

[/INDENT]
});

Spero di essere stato d'aiuto, buon lavoro

gigi.bg

Sicuramente di aiuto... in effetti avevo pensato ad un metodo on() ma ho dubbi su come usarlo... perchè in pratica io sul click faccio salvare l'elemento nel db, al success creo l'elemento con contenuto il valore restituito e lo appendo all'elenco con accanto il bottone per eliminarlo... in pratica nell'on dovrei mettere il cambiamento del dom? Grazie e scusa se ti rompo ancora ma sto cercando di imparare

gigi.bg

Contrordine ho cambiato direttamente come mi dicevi tu e funziona benissimo grazie... mi sa che per ora non sono ancora in grado di aiutarti ma ti ringrazio e a buon rendere