Using jQuery event handlers inside Javascript class constructor

Question

I'm new to OOP in Javascript, I've been changing some of my older codes to make reusable code.I decided to turn them, instead of some inline codes, into some Javascript classes.

So here's my class:

    function TreeStructure(psi, csi, csc, kwargs) {
        this.parentSelectorId       = psi;
        this.childrenSelectorId     = csi;
        this.childrenSelectorClass  = csc;
    
        kwargs = (typeof kwargs === "undefined") ? 'NoOptionalArguments' : kwargs;
    
        // First Question

        $('#' + this.parentSelectorId).click(this.parentSelectHandler());

        // Second Question 
        $('#' + this.parentSelectorId).on('click', this.parentSelectHandler(e));        
    }; 

    TreeStructure.prototype.parentSelectHandler = function () {
        alert("Why is it called after page loads ?!?
                       it's attached to a click handler   huh?");    
    }

And usage of the class:

    $(document).ready(function(){
         tree = new TreeStructure('blahId', 'blahId', 'blahClass');
    });

But when running this, Unexpected events (for me) happen. So here's my two questions:

Why is parentSelectHandler function called after page loads? (I think the expected behavior is to be called after the selector has been clicked)
In jQuery Event handlers, I can get the event and pass it to the event handler function, but when I try to pass parentSelectHandler, an argument 'e', it says it's not defined.

So can anyone please help me ?

Patrick Evans · Accepted Answer · 2013-08-23 12:30:02Z

3

it is executing because you are executing, and subsequently setting its return value as the callback, it instead of setting it itself as the callback

$('#' + this.parentSelectorId).on('click', this.parentSelectHandler(e));

should be

$('#' + this.parentSelectorId).on('click', this.parentSelectHandler);

if you are wanting to capture the event object then modify the anonymous function to

TreeStructure.prototype.parentSelectHandler = function (e) {

this will make e hold the event object

answered Aug 23, 2013 at 12:30

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ali Over a year ago

And as of my 2nd problem , can I be able to pass arguments (event) to the function, if i call it that way ?

Patrick Evans Over a year ago

event is automatically passed, i did a edit a second ago to show modifing the anonymous function to get the event object, it will be in the e variable within the function.

jcubic · Accepted Answer · 2013-08-23 12:31:47Z

3

You're not passing a function but you execute it and then pass return value to click, you need to pass a function.

$('#' + this.parentSelectorId).click(this.parentSelectHandler);

and if you pass that method to click handler the context will be change so you need to wrap it with anonymous function that will keep the context:

var self = this;
$('#' + this.parentSelectorId).click(function(e) {
  self.parentSelectHandler(e);
});

or use bind method

$('#' + this.parentSelectorId).click(this.parentSelectHandler.bind(this));

answered Aug 23, 2013 at 12:31

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

2 Comments

Ali Over a year ago

:Great Idea about that self, thank you, but will I be able to use multiple instances of TreeStructure if I use self that way ? wouldn't it be considered as only One global variable ?

jcubic Over a year ago

@SpiXel each instance will have different self. self is the same as this.

Collectives™ on Stack Overflow

Using jQuery event handlers inside Javascript class constructor

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related