title: jQuery treetable using events
body: <p>I need assistance figuring out how to use the events provided with the jQuery plugin treetable.</p>
  
  <p>jQuery treetable (PLUGIN): <a href="http://plugins.jquery.com/treetable/" rel="nofollow">http://plugins.jquery.com/treetable/</a></p>
  
  <p>This is what I am trying to solve.</p>
  
  <p>When a branch collapses the plugin should trigger an event called "onNodeCollapse".</p>
  
  <p>When a branch collapses I just need to display a javascript popup that says "A branch has collapsed".  From here I can tie it into our own functions.</p>
  
  <p>I have tried several different methods as well as searching on line for a solution.</p>
  
  <p>Example script:  <a href="http://jsfiddle.net/djlerman/yLb25dy9/" rel="nofollow">http://jsfiddle.net/djlerman/yLb25dy9/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
    &lt;title&gt;jQuery treetable with event trigger - jsFiddle demo by djlerman&lt;/title&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://ludo.cubicphuse.nl/jquery-treetable/css/screen.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.theme.default.css"&gt;
  
    &lt;script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'&gt;&lt;/script&gt;
    &lt;script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;script type='text/javascript' src="http://ludo.cubicphuse.nl/jquery-treetable/jquery.treetable.js"&gt;&lt;/script&gt;
  
    &lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
      $(window).load(function(){
      $("#example-basic").treetable({ expandable: true });
  
      /* 
          Trying to get this function to happen when 
          "onNodeCollapse" event happens
      */
      $("#example-basic").on("onNodeCollapse", function() {
          alert( "A branch has collapsed" );
      });
      });//]]&gt;  
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table id="example-basic"&gt;
      &lt;caption&gt;Basic jQuery treetable Example&lt;/caption&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Tree column&lt;/th&gt;
          &lt;th&gt;Additional data&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr data-tt-id="1"&gt;
          &lt;td&gt;Node 1: Click on the icon in front of me to expand this branch.&lt;/td&gt;
          &lt;td&gt;I live in the second column.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr data-tt-id="1.1" data-tt-parent-id="1"&gt;
          &lt;td&gt;Node 1.1: Look, I am a table row &lt;em&gt;and&lt;/em&gt; I am part of a tree!&lt;/td&gt;
          &lt;td&gt;Interesting.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr data-tt-id="1.1.1" data-tt-parent-id="1.1"&gt;
          &lt;td&gt;Node 1.1.1: I am part of the tree too!&lt;/td&gt;
          &lt;td&gt;That's it!&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr data-tt-id="2"&gt;
          &lt;td&gt;Node 2: I am another root node, but without children&lt;/td&gt;
          &lt;td&gt;Hurray!&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>