javascript - Class not being added in method when using $(this) selector -

can explain why code works:

$('#fonykerusernameregister').blur(function(){             if($(this).val().length > 2) {                 $.ajax({                     url: '<?php echo $html->url('/fonykers/validate_username',true); ?>' + '/' + $(this).val(),                     datatype: 'json',                     type: 'post',                     success: function(response) {                         if(!response.ok) {                             $('#fonykerusernameregister').addclass('error');                             error.html(response.msg);                             error.fadein();                         } else {                             if($('#fonykerusernameregister').is('.error')) {                                 $('#fonykerusernameregister').removeclass('error');                             }                             $('#fonykerusernameregister').addclass('ok');                         }                     },                     error:function (xhr, ajaxoptions, thrownerror){                         alert(xhr.statustext);                         alert(thrownerror);                     }                  });                     } else {                error.html('username must have @ least 3 characters');                error.fadein();                $('#fonykerusernameregister').addclass('error');             }         }); 

as opposed one:

$('#fonykerusernameregister').blur(function(){             if($(this).val().length > 2) {                 $.ajax({                     url: '<?php echo $html->url('/fonykers/validate_username',true); ?>' + '/' + $(this).val(),                     datatype: 'json',                     type: 'post',                     success: function(response) {                         if(!response.ok) {                             $(this).addclass('error');                             error.html(response.msg);                             error.fadein();                         } else {                             if($(this).is('.error')) {                                 $(this).removeclass('error');                             }                             $(this).addclass('ok');                         }                     },                     error:function (xhr, ajaxoptions, thrownerror){                         alert(xhr.statustext);                         alert(thrownerror);                     }                  });                     } else {                error.html('username must have @ least 3 characters');                error.fadein();                $(this).addclass('error');             }         }); 

i'm assuming second 1 bit more optimized i'd rather use way if possible, isn't setting classes on elements.

the first code (working code) refers element id: jquery $ function replacement document.getelementbyid.

in second code, when try reference element using this, scope such this refer request object or window. solution, if want use this object scope desire, use proxy method bind handler function, or grab target element variable use in closure.

of 2 methods, using proxy the least end causing circular reference. code you've given here safe, have watch when use element references in closures if target element removed dom @ point - you'd potentially have situation browser's garbage collector cannot free resources related element because closure holding open reference pointer.

all proxy create closure specified scope, see docs here.

for further reading on scope, check out this mdc document , mdc scope "cheat sheet"

closure:

$('#fonykerusernameregister').blur(function(){     var target = $(this);     if($(this).val().length > 2) {         $.ajax({             url: '<?php echo $html->url('/fonykers/validate_username',true); ?>' + '/' + $(this).val(),             datatype: 'json',             type: 'post',             success: function(response) {                 if(!response.ok) {                     target.addclass('error');                     error.html(response.msg);                     error.fadein();                 } else {                     if(target.is('.error')) {                         target.removeclass('error');                     }                     target.addclass('ok');                 }             },             error:function (xhr, ajaxoptions, thrownerror){                 alert(xhr.statustext);                 alert(thrownerror);                 alert(target);             }          });             } else {        error.html('username must have @ least 3 characters');        error.fadein();        $(this).addclass('error');     } }); 

proxy

$('#fonykerusernameregister').blur(function(){     if($(this).val().length > 2) {         $.ajax({             url: '<?php echo $html->url('/fonykers/validate_username',true); ?>' + '/' + $(this).val(),             datatype: 'json',             type: 'post',             success: $.proxy(function(response) {                 if(!response.ok) {                     $(this).addclass('error');                     error.html(response.msg);                     error.fadein();                 } else {                     if($(this).is('.error')) {                         this.removeclass('error');                     }                     $(this).addclass('ok');                 }             }, this),             error:$.proxy(function (xhr, ajaxoptions, thrownerror){                 alert(xhr.statustext);                 alert(thrownerror);                 alert(this);             }, this)          });             } else {        error.html('username must have @ least 3 characters');        error.fadein();        $(this).addclass('error');     } });