jQuery callback functions?

Question

I can't seem to get this to work: Here's the code:

// Clears the default text on click, but restores if nothing is entered
var clearText =  (function(){
    $("input:text").each(function () {

       var default_value = this.value;

       $(this).focus(function(){
               if(this.value == default_value) {
                       this.value = '';
               }
       });

       $(this).blur(function(){
               if(this.value == '') {
                       this.value = default_value;
               }
       });

    });

    $("textarea").each(function () {

       var default_value = this.value;

       $(this).focus(function(){
               if(this.value == default_value) {
                       this.value = '';
               }
       });

       $(this).blur(function(){
               if(this.value == '') {
                       this.value = default_value;
               }
       });

    });

})();


$('html').on('keydown', 'body', function(e){
    if (e.which == 9)
    {
        clearText();
    }
});

clearText() is definitely being called at page load, but then it doesn't work as a callback function? I'm not entirely sure why, can anyone help me out?

Cheers

Answer 1

Try to put you functions inside document.ready i.e.

$(document).ready(function(){ 
   // Your functions here... 
   $("input:text").each(function(e){
     // code goes here...
   });
});

No need to wrap it inside another braces/().

Answer 2

clearText is undefined, it is not a function. You were calling it as you thought you were defining it. Thats what the () at the end of the function assignment was.

var clearText =  function(){
    $("input:text").each(function () {

       var default_value = this.value;

       $(this).focus(function(){
               if(this.value == default_value) {
                       this.value = '';
               }
       });

       $(this).blur(function(){
               if(this.value == '') {
                       this.value = default_value;
               }
       });

    });

    $("textarea").each(function () {

       var default_value = this.value;

       $(this).focus(function(){
               if(this.value == default_value) {
                       this.value = '';
               }
       });

       $(this).blur(function(){
               if(this.value == '') {
                       this.value = default_value;
               }
       });

    });

};

Now the function is invokable