[jQuery] Input, sostituzione e Blur: non funziona

[Diego_vl]

Ciao a tutti.

Volevo implementare una cosa del genere: alla visualizzazione della pagina appaiono nel div login due input text: email e password, con testo visibile (La tua email, La tua password). Fin qui tutto ok.

All'evento blur di ogni campo era mia intenzione, qualora il testo fosse nullo, far tornare la stringa di default. Per l'username nessun problema. Funziona con questo codice:

    $('#input-email').click(function() {
        if ($(this).val() == 'La tua email')
        {
            $(this).val('');
        }
    });
    
    $('#input-email').blur(function(){
        if ($(this).val() == '' )
        {
            $(this).val('La tua email');
        }    
    }); 

Per la password l'ho pensata in questo modo, essendo prima type="text" e poi type="password".

    $('#input-password').click(function() {
        if ($(this).val() == 'La tua password')
        {
            $(this).replaceWith('<input type="password" id="input-password" class="myinputstyle" value="" />');
        }
    });
    
    $('#input-password').blur(function(){
        if ($(this).val() == '')
        {
            $(this).replaceWith('<input type="text" id="input-password" class="myinputstyle" value="La tua password"/>');
        }    
    }); 

Il tutto è scritto in $(document).ready(function().

Il problema è che una volta che input-password viene rimpiazzato, l'evento blur non si attiva. Come mai? C'è un modo migliore per gestire questa cosa?

[Senamion]

Non capisco perchè cambi proprio tutto l'input della password. Comunque il problema è che gli eventi tipo click e blur come li hai lanciati tu valgono solo per gli elementi presenti nel dom. Se vuoi fare in modo che valgano anche per gli elementi che aggiungi tu (come nel tuo caso) devi usare live().

$('#input-password').live('click', function() { 
        if ($(this).val() == 'La tua password') 
        { 
            $(this).replaceWith('<input type="password" id="input-password" class="myinputstyle" value="" />'); 
        } 
    }); 
     
    $('#input-password').live('blur', function(){ 
        if ($(this).val() == '') 
        { 
            $(this).replaceWith('<input type="text" id="input-password" class="myinputstyle" value="La tua password"/>'); 
        }     
    });

[Diego_vl]

Ti ringrazio per la soluzione; l'attributo type può essere cambiato in maniera differente?

[Senamion]

Non ho mai provato ma dovrebbe essere:

$(this).attr("type", "text");