[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?