Changing a variable reference in JavaScript

Issue

I am having a hard time figuring out how to reassign a variable to a new function.

I have two anonymous functions that are assigned to variables and I want "first" to assign itself to "after" after it is called once.

When using .toSource in Firefox it seems like it is definitely reassigning first to after, but the "first in the click handler is still referencing or calling the first that was created at runtime.

Why is this?

JS

var after = function() {
    alert("AFTER");
}

var first = function() {
    alert("FIRST");
    //alert(first.toSource());
    first = after;
}

$(".order").click( first );

HTML

<button type="button" class="order">Order</button>

http://jsfiddle.net/E2R2R/2/

Solution

Following up on @MichaelGeary s answer, if you want to make the function work by referencing like that, put your function call inside an anonymous function:

$(".order").click( function() {
    first();    
});

Demo: http://jsfiddle.net/E2R2R/4/

Answered By – tymeJV

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0