how to define functions in jquery?

Question

I've the code below that works great in my ready function in jquery, when i fill the form and change focus from the input element to another run the ajax check and assign a css class to the element, showing if is validated or not. everything ok.

id' like to define with this code a function so i can call it also when the page is just loaded, so the check will be performed also if the form is populated in server side, and on blur, but i faced troubles defining functions in jquery.

this is the code that runs on blur

$('#join_username').blur(function(){
    $('#join_username').addClass(\"join_form_input_checking\");
    $('#join_username').removeClass(\"join_form_input\");      
    $('#join_username').removeClass(\"join_form_input_error\");      
    $('#join_username').removeClass(\"join_form_input_verified\");      


    $.post(\"inc/viewlets/join_form/check_username.php\", {
           join_username: $('#join_username').val()
           }, 
           function(response){
              setTimeout(\"finishAjaxUsername('usernameResult', '\"+escape(response)+\"')\", 400);
     if(escape(response)=='true') joinFormCheck[0]=true;      
     else joinFormCheck[0]=false;

     checkFormArray(joinFormCheck);        
           }
          );          

    return false;
});

Answer 1

Simply define a function instead of passing the blur() an anonymous function:

$.myFunctionName = function()
{
   // your code here
}

$("#join_username").blur($.myFunctionName);

If you want the function to be called in response to an event (such as document.ready), just call it like you would a normal function.

$(document).ready(function()
{
    // -- define your function
    $.myFunctionName = function()
    {
       //your code here
    }

    // -- add a callback to blur on an input
    $("#join_username").blur($.myFunctionName);

    // -- manually call the function once
    $.myFunctionName(); 
});

Answer 2

I think you just have invalid syntax here:

$('#join_username').blur( function(){
    $(this)
      .addClass("join_form_input_checking")
      .removeClass("join_form_input");      
      .removeClass("join_form_input_error");      
      .removeClass("join_form_input_verified");      


    $.post("inc/viewlets/join_form/check_username.php", {
      join_username: $(this).val()
    }, function(response) {
      setTimeout( function() {
        finishAjaxUsername('usernameResult', escape(response))
      }, 400);
      if(escape(response)=='true') { joinFormCheck[0]=true; }
      else { joinFormCheck[0]=false; }
      checkFormArray(joinFormCheck);          
    } );                  

    return false;
} );

Try that. Then, of course if you want the function to be separate from the blur event you can simply assign it to a variable... so you'd end up with:

var blurFunc = function() { ...function from above... };
$('#join_username').blur( blurFunc );

Answer 3

or you could use use regular function syntax

function do_on_blur(){
   // your base. I'm in it
}

and

$("#join_username").blur( do_on_blur );

Answer 4

If you don't want to create a jQuery plugin, then it is enough to pass to that jQuery function a reference to the function you want to use. Anonymous functions are used when you need that function only once.

function blur() {};

$('#join_username').blur(blur);

That is normally done when the function is used more than once; normally, you will use an anonymous function.