jquery object - function undefined error

Question

In the following function, my objects inside floatShareBar function is undefined. Do I have to init or define a var before the functions? it throws me js error : .float - function undefined.

   (function($) {
.
.
.

    $("body").on("ab.snap", function(event) {
        if (event.snapPoint >= 768) {
            floatShareBar.float()
        } else {
            floatShareBar.unfloat();
        }
    });

    var floatShareBar = function() {
        var fShareBar = $('#article-share');

        this.float =  function() {
            console.log(
        };
        this.unfloat = function() {
            console.log("unfloat");
        };
    };
.
.
.

})(jQuery);

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

You need to get an instance of that function with a self instantiating call:

var floatShareBar = (function() {
    var fShareBar = $('#article-share');

    this.float =  function() {
        console.log('float');
    };
    this.unfloat = function() {
        console.log("unfloat");
    };

    return this;
})();

UPDATE 1: I modified it to create an object within the function to attach those functions to, since in the previous example this refers to the window object

var floatShareBar = (function() {
    var fShareBar = $('#article-share');
    var instance = {};

    instance.float =  function() {
        console.log('float');
    };
    instance.unfloat = function() {
        console.log("unfloat");
    };

    return instance;
})();

UPDATE 2: You can actually just use the new keyword as well, look here for more info

var floatShareBar = new (function() {
    var fShareBar = $('#article-share');

    this.float =  function() {
        console.log('float');
    };
    this.unfloat = function() {
        console.log("unfloat");
    };
})();

edited May 23 '17 at 12:27

Community

1
1

answered Oct 11 '14 at 06:22

bruchowski

4,353
5
26
44

Not my downvote, but the problem is that `this` refers to the window object, not the function itself. It's probably not the intention to add functions to the window object. – JJJ Oct 11 '14 at 06:32
@Juhana learn something new every day.. I guess that makes sense since there is no 'owner' of the function yet when declared thusly – bruchowski Oct 11 '14 at 06:42
thanks. so, when I call the function from body.on, should i call as instance.float or floatsharebar.float? – tv4free Oct 11 '14 at 12:24
`floatShareBar.float()`, `instance` only exists within the closure – bruchowski Oct 11 '14 at 16:59

score -1 · Answer 2 · answered Oct 11 '14 at 06:25

Change you function to this:

$("body").on("ab.snap", function(event) {
        if (event.snapPoint >= 768) {
            (new floatShareBar()).float()
        } else {
            (new floatShareBar()).unfloat();
        }
    });

function floatShareBar () {
        var fShareBar = $('#article-share');

        this.float =  function() {
            console.log(
        };
        this.unfloat = function() {
            console.log("unfloat");
        };
    };

you should declare functions when using var before you call them.

jquery object - function undefined error

2 Answers2