Push method only works once unless variable is used before

Question

This might be a weird question. Anyway, I'm working on a jQuery plugin and this is a useful piece of code for this question, note that it's not all ;) :

Javascript:

(function($){
    $.fn.newPlugin = function(){
        var ranges = [], selectableRange = this;

        function init(){
            selectableRange.live('mousedown', function(){
                selectableRange.live('mouseup', function(){
                    addRange(Math.random(), Math.random());
                    selectableRange.die('mouseup');
                });
            });
        }

        function addRange(a, b){
            // console.log(ranges);
            ranges.push({start: Math.min(a,b), end: Math.max(a,b)});
            console.log(ranges);
        }

        return { init: init };
    };
})(jQuery);

$(document).ready(function(){
    var instance = $('#element').newPlugin();
    instance.init();
});

HTML:

 <div id="element" style="width:200px;height:200px;background:grey;"> </div>

What it does seems pretty useless; anyway, every time someone puts his mouse down and then up on an element, a new object is added to the back of ranges. Unfortunately, in my console the ranges array contains only one object, no matter how many times is clicked on $('#element').

I tried to figure out what was going on and uncommented the line console.log(ranges); before an object was pushed to the back of the ranges array. Then, surprisingly, it worked. The ranges array grew...

Can somebody tell me why this .push only works when ranges is used before?

Answer 1

I'm having a hard time understanding what it is you're trying to do here. What is that return value supposed to mean?

The only thing I can think of is that what you're really trying to do is run a function at the time your plugin is defined, such that that function itself returns the actual function that'll implement the plugin. As it is, it looks to me as if the reason your array only has one element in it is that a new array is created every time you call the plugin. It looks like you're trying to create a closure, but there's no function call so the closure isn't made.

Try changing your plugin definition:

$.fn.newPlugin = (function() {
   // ...
   // all the code you currently have, though I still don't know
   // exactly what that return value is supposed to mean
   // ...
})();

Answer 2

Sorry that I asked this question...

Somehow Chrome's console cached its logs and showed an increasing number on the left side of the log. Everything worked fine...