title: jQuery UI tabs nested tabs events triggering and binding
body: <p>I'm using nested <a href="http://jqueryui.com/demos/tabs/" rel="nofollow">jQuery UI tabs</a> as shown here <a href="http://jsfiddle.net/VvFyM/1/" rel="nofollow">http://jsfiddle.net/VvFyM/1/</a></p>
  
  <p>I'm trying to bind to the <strong>tabsselect</strong> event separately for both the outside tabs and the nested tabs. Problem is, whenever the nested tab's tabsselect event is triggered, it seems that either:</p>
  
  <ol>
  <li>The outside tab's tabsselect handler <strong>catches it as well</strong>, or </li>
  <li>The outside tab's select event is <strong>also triggered</strong> (hence it is caught).</li>
  </ol>
  
  <p>Which is it?</p>
  
  <p>Then, is there a way to trigger and bind the 2 events separately? </p>
  
  <p>So, instead of </p>
  
  <pre><code>$("#tabs").bind("tabsselect", function(ev, ui){
      console.log("Tab selected");
  })
  </code></pre>
  
  <p>I want to do something like</p>
  
  <pre><code>$("#tabs").bind("/*tabsselect outside tabs only*/", function(ev, ui){
      console.log("Tab selected");
  })
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$("#tabs").bind("/*tabsselect inside tabs only*/", function(ev, ui){
      console.log("Tab selected");
  })
  </code></pre>