evento click su un div overlay

[feed90]

Salve a tutti,
ho creato un div mediante jquery che si apre quando premo il bottone il cui id è messaggi:

$(document).ready(function() {
    var show = true;
    var overlay = jQuery('<div id="overlay"> <?php include "msg/messaggi.php" ?> </div>');
     $("#messaggi").click(function(){
        
        if (show==true)
        {                    
            overlay.appendTo(document.body);
            show=false;
        }
        else
        {
            show=true;
            overlay.remove();
        }        
    });    


});

all'interno del file incluso mediante php nel div "overlay" si creano ulteriori div a cui ho associato la classe "messaggi" . Voglio ottenere l'id di questi mediante jquery quando clicco su di essi. l'intero codice,che non capisco perchè non funzioni, diventa allora:

$(document).ready(function() {    var show = true;
    var overlay = jQuery('<div id="overlay"> <?php include "msg/messaggi.php" ?> </div>');
     $("#messaggi").click(function(){
        
        if (show==true)
        {                    
            overlay.appendTo(document.body);
            show=false;
        }
        else
        {
            show=true;
            overlay.remove();
        }        
    });    
        $(".messaggi").click(function(){
             var recupero_id = $(this).attr("id"); 
             alert(recupero_id);
    });


});

riuscite a spiegarmi perchè non si riesce proprio a cliccare sul div .messaggi? grazie

[KillerWorm]

Ciao, ti spiego dove sta il problema e ti indico come risolverlo.

La variabile overlay, che hai dichiarato e popolato all'inizio dello script, è semplicemente una stringa testuale sebbene contenga il codice HTML che poi vai ad applicare alla pagina. Ciò significa che niente di tutto ciò che sta dentro quella variabile, esiste realmente sul DOM, fino a quando non vai ad applicarlo attraverso appendTo(). Pertanto l'assegnazione del gestore click(), per il selettore $(".messaggi"), non va a buon fine perché, nel momento che vai ad effettuarla, non viene trovato, sul DOM, alcun elemento ".messaggi".

Puoi risolvere usando la delegazione dell'evento attraverso il metodo on().

$(document).on("click",".messaggi", function(){
     var recupero_id = $(this).attr("id"); 
     alert(recupero_id);
});

Riporto quanto indicato sulle varie documentazioni:

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

Fonte: http://api.jquery.com/on/

Note: Event handlers attached using the on() method will work for both current and FUTURE elements (like a new element created by a script).

Fonte: http://www.w3schools.com/jquery/event_on.asp

Personalmente avrei optato per una soluzione differente. Avrei creato il div #overlay direttamente nel codice HTML, e lo avrei semplicemente nascosto/visualizzato attraverso il pulsante, quindi senza rimuoverlo. Non vedo la necessità di applicare e rimuovere ogni volta quei contenuti che saranno comunque mantenuti, anche se in forma testuale, su quella variabile.

[feed90]

grazie mille, effettivamente è sufficiente nasconderlo ho fatto cosi', grazie ciao!