Question

I have a login form, which contains simple text box, that shows the text ‘Password’. When a user clicks the box, i.e. on focus event, I replace the text box html with password box html, with same id, same everything else.

However, after this change, the focus event does not work on the password box anymore, even though it has the same id. Do I need to do anything extra? like bind function to the password box. Please show me how to do it, with some code snippets. Thanks.

Here’s my code:

$(".login_fields input")
  .focus(function (e) {
      $(this).parent().html('<input type="password" value="" id="admin_password">');
      $(this).val('');
  })

Answer 1

Try using live instead of bind, because the element was added after the binding, it has no event handler attached to it:

$('#myTextBox').live('click', function() {
  // Live handler called.
});

Here’s a reference:

http://api.jquery.com/live/

Here’s a probable solution for you:

$(".login_fields input").live("focus", function(){
      $(this).parent().html('<input type="password" value="" id="admin_password">');
      $(this).val('');
});