title: Using jQuery event handlers inside Javascript class constructor
body: <p>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.</p>
  <p>So here's my class:</p>
  <pre><code>    function TreeStructure(psi, csi, csc, kwargs) {
          this.parentSelectorId       = psi;
          this.childrenSelectorId     = csi;
          this.childrenSelectorClass  = csc;
      
          kwargs = (typeof kwargs === &quot;undefined&quot;) ? 'NoOptionalArguments' : kwargs;
      
          // First Question
  
          $('#' + this.parentSelectorId).click(this.parentSelectHandler());
  
          // Second Question 
          $('#' + this.parentSelectorId).on('click', this.parentSelectHandler(e));        
      }; 
  
      TreeStructure.prototype.parentSelectHandler = function () {
          alert(&quot;Why is it called after page loads ?!?
                         it's attached to a click handler   huh?&quot;);    
      }
  </code></pre>
  <p>And usage of the class:</p>
  <pre><code>    $(document).ready(function(){
           tree = new TreeStructure('blahId', 'blahId', 'blahClass');
      });
  </code></pre>
  <p>But when running this, Unexpected events (for me) happen. So here's my two questions:</p>
  <ol>
  <li>Why is <code>parentSelectHandler</code> function called after page loads? (I think the expected behavior is to be called after the selector has been clicked)</li>
  <li>In jQuery Event handlers, I can get the event and pass it to the event handler function, but when I try to pass <code>parentSelectHandler</code>, an argument <code>'e'</code>, it says it's not defined.</li>
  </ol>
  <p>So can anyone please help me ?</p>