jQuery onblur not working

Question

$('#lPass').focus(function() {  
        if (this.value == this.defaultValue) this.value = '';
        $(this).after('<input type="password" id="lPass" size="10" value="'+this.value+'"/>').remove();
}).blur(function() {
    alert(1);
});

<input id="lPass" type="text" size="10" value="Password"/>

onblur not working.
Any ideas?

Answer 1

Use live instead of focus and blur

.live() has been deprecated. Use .on() and .off() instead.

because you are adding the input in run time, so it adds to the page with out the events, live:

Attach a handler to the event for all elements which match the current selector, now or in the future.

Example:

$('#lPass').on('focus', function() {
    if (this.value == this.defaultValue) this.value = '';
    $(this).after('<input type="password" id="lPass" size="10" value="' + this.value + '"/>').remove();
});


$('#lPass').on('blur', function() {
    alert(1);
});

Answer 2

This for your exact code:

$('#lPass').live('focus', function() {  
    if (this.value == this.defaultValue) this.value = '';
    $(this).after('<input type="password" id="lPass" size="10" value="'+this.value+'"/>').remove();
}).live('blur', function() {
    alert(1);
});

Answer 3

The first issue I see is that your selector is an ID of #lPass, yet, within that selector you attempt to insert a new tag with that same ID. ID must be unique on the page. THEN you attempt to remove with the .remove() - seems to make no sense to me.

Just use the .remove() or use a new id...

OR clarify what you want to do.

As for the .blur, just use a blur, but the ID must be fixed, or use the .live() as others suggest if you wish to blur the NEW field you added.