jQuery event binding does not work properly or i can't make it properly working

Question

HTML:

<input id="email" name="email" type=text />
<input id="password name="password" type="password" />

JavaScript:

var fields = ["email","password"];
for (var i in fields) {
    var field = $("#"+fields[i]);
    field.bind({
        focus: function() {
            field.css("border-color","#f00");
        },
        blur: function() {
            field.css("border-color","#000");
        }
    });
}

My desire action will be as follows:

1. When I place cursor on any of the above fields the input field's border will be red.
2. When I take away the cursor from the field it's border will be black.

But the event is occurs only for the password filed whether I place and take away cursor form any of the above fields.

Answer 1

This is a really common problem, the field variable accessed on the focus and blur event belongs to the outer scope, so it contains the last iterated value, in your case it will contain "password".

There are a lot of ways to solve this, for example you could use $.each which introduces a new scope:

jQuery.each(["email", "password"], function(index, fieldId) {
  var field = $('#'+fieldId);

  field.bind({
    focus: function() {
      field.css("border-color","#f00");
    },
    blur: function() {
      field.css("border-color","#000");
    }
  });
});

Or using $(this) instead of field in your event handlers, i.e.:

var fields = ["email","password"];
for (var i = 0; i < fields.length; i++) {
    $("#"+fields[i]).bind({
        focus: function() {
            $(this).css("border-color","#f00");
        },
        blur: function() {
            $(this).css("border-color","#000");
        }
    });
}

_{Off-topic note: also in the above example that I use a normal loop, instead the for...in statement, which is not really meant to be used on array-like objects.}

Try out the two code examples here.

Answer 2

This works:

$('input#email, input#password').bind({
    focus: function() {
        $(this).css("border-color","#f00"); 
    },
    blur: function() {
        $(this).css("border-color","#000"); 
    }
});

You may also need to clean up your HTML if the typos in your question are in the real thing:

<input id="email" name="email" type="text" />
<input id="password" name="password" type="password" />

Answer 3

One additional note that could improve your code. jQuery does almost everything by iterating over sets, so there is no need to manually iterate over a list of keys with a for loop. Instead, you can just do this:

$("#email, #password").bind({ // grab both elements at once
    focus: function() {
        $(this).css("border-color","#f00");
    },
    blur: function() {
        $(this).css("border-color","#000");
    }
});

Note that, as in CMS's example, I am using this to reference the element within the handler functions. this will refer to the node on which the event was triggered, so it will be #email when focusing in that field, and #password when focusing on the other.o