CODEWITHSUNDEEP
javascriptjqueryoop
Aaron Belz
Aaron Belz

Reputation: 65

jQuery use specific object that is dynamically named

I have been fiddling around with some more OO type JS and jQuery; as such it means I can create multiple instances of an object (duh). However I am having trouble using object functions and variables within .click() or .on() etc. I see the problem I know what it is; I am trying to use the local object "this" within a global or even specific object without having the called methods defined. Code
/* exported cConsole */

var styleDiv = "position:absolute;min-width:100%;min-height:100%;z-index:200;top:0;display:none;padding-left:6px;border-left:6px solid red;background-color:lightgrey;";
var styleButton = "position:fixed;color:white;background-color:red;bottom:0px;right:0px;";

var cConsole = function(name, parent) {
    this.name = name;
    this.parent = parent;

    if (this.name === undefined)
        this.name = 'console';

    if (this.parent === undefined)
        this.parent = 'body';

    this.selectorDiv = 'div[name="' + this.name + '"]';
    this.selectorButton = 'button[name="' + this.name + '"]';

    this.init = function() {
        $(this.parent).after('<div style="' + styleDiv + '" name="' + this.name + '"></div>');
        $(this.parent).after('<button style="' + styleButton + '" name="' + this.name + '">Toggle ' + this.name + '</button>');
        $(this.selectorDiv).append('<button style="' + styleButton + '" name="' + this.name + '">Toggle ' + this.name + '</button>');
    };


    this.toggleIt = function(time) {
        $(this.selectorDiv).toggle(time);
    };


    this.hideIt = function(time) {
        $(this.selectorDiv).hide(time);
    };


    this.showIt = function(time) {
        $(this.selectorDiv).show(time);
    };


    $(this.selectorButton).on('click', function() {
        // I realize that 'this' is refering to the button object so this is fake.
        // I just don't know how to pass in the object.
        // I've tried setting 'var self = this' then using 'self.' as it was declared
        // before this function but still not being called correctly as its still an
        // object var.
        SOMETHING POINTING TO THE "PARENT" OBJECT.toggleIt(500);
    });
}

Lines: 41~50
Fiddle (repl.it): https://repl.it/GQfD/2
Sorry if my explanation stinks..

Upvotes: 0

Views: 44

Answers (2)

trincot
trincot

Reputation: 350222

You can use bind, which creates a function that has the context (this) predefined, as well as (some of) the argument(s) that will be passed when it gets called:

$(this.selectorButton).on('click', this.toggleIt.bind(this, 500));

Then there is a second issue: the selector buttons are not yet created when the Console constructor runs, so either you have to move this line of code inside the init method, after the buttons have been created (see updated fiddle on repl.it), or you use event delegation, like this:

$(document).on('click', this.selectorButton, this.toggleIt.bind(this, 500));

... which will only verify at the moment the event fires whether the selector button was the cause of it.

Upvotes: 1

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

You can use $.proxy() to set the event handler with a different context:

$(this.selectorButton).on('click', $.proxy(this._handleClick, this));

this._handleClick = function () {
    // here this would be a reference to the object.
};

Upvotes: 0

Related Questions