Jquery: l'evento Click non funziona dopo l'aggiunta. (Non so come usare. ON)

Question

Ho 2 eventi click. Si aggiunge un IMG che include un altro evento click. Non funziona ovviamente. So che devo usare jQuery .ON, ma non riesco a capire come e dove.

Il mio codice:

$(document).ready(function() { 
    // The one below (.choimh) isn't triggered anymore 
    $('.choimg').click(function(){ 

    }); 

    // Switch to chosen color 
    $('.color').click(function(){ 
     $(".thumbs").append('<a href="#"><img id="image'+u+'" class="choimg" src="/img/products/mini/'+colnumber+'-'+ i + '.jpg" />'); 
    }); 
}); 

Il .color div è in un luogo completamente diverso da quello .choimg.

Non riesco proprio a capire come usare .ON.

Answer 1

Un tempo erano le funzioni live o delegate che facevano questo genere di cose. Ora si può fare in questo modo:

$(document).on('click', '.choimg', function(e) { 

//do whatever 

}); 

Answer 2

si dovrebbe usare qualcosa di simile a:

$(document).on("click", ".color", function() { 
//append code here 
}); 

prototipo generale è on(eventType, selector, function), è possibile utilizzare altri eventi troppo.

Per ulteriori informazioni, vedere this.

Answer 3

fa molto, ma per il tuo caso specifico, vuoi mettere "on" su un oggetto DOM che non viene caricato dopo che il DOM è stato caricato. Ciò consente all'evento di insinuarsi in questo oggetto DOM che, a sua volta, delega l'evento all'elemento DOM appropriato in base al secondo selettore fornito.

Se segui il link sopra, ci sono un sacco di informazioni a riguardo nella documentazione di jQuery. In particolare, questo è importante per il tuo caso ...

I gestori di eventi sono associati solo agli elementi attualmente selezionati; loro devono esistere nella pagina nel momento in cui il codice effettua la chiamata a .on(). Per garantire che gli elementi siano presenti e selezionabili, eseguire l'associazione evento all'interno di un gestore pronto per documenti per gli elementi presenti nella marcatura HTML nella pagina. Se il nuovo codice HTML viene iniettato nella pagina, seleziona gli elementi e associa i gestori di eventi dopo che il nuovo codice HTML è inserito nella pagina. In alternativa, utilizzare gli eventi delegati per collegare un gestore di eventi , come descritto di seguito.

In ogni caso, è necessario associare alla cosa che già esiste, e fornire un secondo selettore per la cosa che sta per aggiungere che si desidera avere l'evento reale, insieme con l'evento, e la funzionalità. Qualcosa di simile ...

$('#selector-to-thing-that-exists').on('click', '.thing-that-will-be-added-later', function() { 
    alert('Do stuff here!'); 
}); 

Nota che è importante che la "cosa che esiste" è a partire, come si può eventualmente ottenere nel DOM per l'efficienza. Ad esempio, non è preferibile posizionare il selettore sul "corpo" o sul livello del documento. Tienilo a mente.

Speriamo che questo dia un po 'di comprensione per quello che vuoi fare. I altamente ti incoraggiamo a leggere la documentazione di jQuery perché è molto buona.