up vote 2 down vote favorite

Well, 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:
1 - Why is parentSelectHandler function called after page loads ?(I think the expected behavior is to be called after the selector has been clicked)
2 - 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 ?
Thanks

share|improve this question
up vote 2 down vote accepted

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

share|improve this answer
    
And as of my 2nd problem , can I be able to pass arguments (event) to the function, if i call it that way ? – SpiXel Aug 23 '13 at 12:31
    
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. – Patrick Evans Aug 23 '13 at 12:33
    
It's great then :) Thank You – SpiXel Aug 23 '13 at 12:33
up vote 1 down vote

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));
share|improve this answer
    
: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 ? – SpiXel Aug 23 '13 at 12:40
    
@SpiXel each instance will have different self. self is the same as this. – jcubic Aug 23 '13 at 13:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.