JQuery event binding does not work properly or I can't make it properly working?

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 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.

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 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.

Thanks a lot bro :) – Saiful May 21 '10 at 5:59.

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.

This is definitely the best solution, unless there are more fields in the array or the fields are dynamic – Jason May 21 '10 at 6:01 whoops, looks like you beat me to the punch :) – Kent May 21 '10 at 6:09.

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.

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" .

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions