Friday, 23 August 2013

Using Jquery event handlers inside javascript class constructor

Using Jquery event handlers inside javascript class constructor

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

No comments:

Post a Comment