jQueryUI - handling 'click'\'select' event of an already selected tab

I have a jQueryUI tabs object, and i want to handle the event of a tab being clicked, when is already selected.

using:

$("#tabs").tabs({
    select: function (event, ui) {
        onSelected();
    }
});

I'm able to handle the event when the tab is first clicked (selected), but when i click it again - the handler isn't called.

is there any solution for that?

If not - another option that will suit my needs is the following:

define the tabs as collapsible, and collapse them by script (and not by user click). i define the tabs object as:

$("#tabs").tabs({
    collapsible: true
});

but when i try to simulate a click using:

$("#tabs").tabs("select", 0);

or

$("#tab-link-0").trigger('click');

nothing happ开发者_运维问答ens.

I need to point out that the tabs are added dynamically, using:

$("#tabs").tabs("add", "#tab-link-0", "title 0");

any ideas\suggestions for any of the cases?

Thanks,

I experimented a bit and found out that you can prevent the collapse of a tab by calling event.preventDefault() in the select handler. You obviously only want to do this when the select handler is fired on your currently-selected tab (to prevent collapsing the tab), or you'll never be able to switch the tab. This is worth testing, due to the call to preventDefault() on the jQuery event, but it appears to give you the behavior you want, at least in Chrome:

var tabs = $("#tabs").tabs({
   collapsible: true,
   select: function(event, ui) {
      if (tabs.tabs('option', 'selected') === ui.index) {
         // Prevent the tab from collapsing if the event fired on the 
         // currently-selected tab
         event.preventDefault();
      }
      onSelected();
   }
});