未在函数中定义的Javascript变量

Question

I'm writing a small script to clear my search forms when they're clicked on for "only" the first time. So far I have the follow:

$(function() {
  if(typeof firstClick == 'undefined') 
  { 
    $("#search").live("focus", function() {
      $(this).val("");
      var firstClick = true;
    });
  }
});

However, even with defining the variable with var firstClick = true; in the function, the script seems to pass the if statement every time. I'm sure I'm missing something silly, but I can't seem to figure it out.

I've tried defining the var firstClick outside of the function as a false boolean, and then checking to see if it's false or not but I still can't seem to get the variable to go true in the function.

Answer 1

var firstClick = true;

You are redeclaring firstClick here. Remove var , and define it outside of both functions. Adding var before an assignment tells Javascript to make a variable scoped to the current function, which in your case is anonymous function assigned to the focus event. The outer function can't see it since you limited its scope with var .

Answer 2

Variables exist only in the scope in which they are defined (using var ) and in descendant scopes. Your typeof call is in an ancestor scope. firstClick does not exist there. You should define the variable as false in the outer scope, then redefine it as true inside. Furthermore, the conditional should be inside the click handler.

$(function() {
  var firstClick = false;

  $("#search").live("focus", function() {
    if (!firstClick) {
      $(this).val("");
      firstClick = true; // change the value in the outside scope
    }
  });
});

Answer 3

Your firstClick var is defined within the local scope of the callback function, thus is not visible to the parent code.

var firstClick = false;

$(function() {
  if(!firstClick) 
  { 
    $("#search").live("focus", function() {
      $(this).val("");
      firstClick = true;
    });
  }
});

Answer 4

The problem is one of scope. The variable firstClick exists only within the focus event. You need to declare firstClick as a global within the namespace, like so:

(function($) {
   var firstClick = false;

   $('#search').live('focus', function() {
        if (typeof firstClick === 'undefined') {
           $(this).val('');
           firstClick = true;
        }
   });
}(jQuery));