jquery onblur not working

Question

Hello

$('#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

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').live('focus', function() {
    if (this.value == this.defaultValue) this.value = '';
    $(this).after('<input type="password" id="lPass" size="10" value="' + this.value + '"/>').remove();
});


$('#lPass').live('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.