How to bind to jQuery UI tab event click/select/active

bindevent-handlingjquery-ui-tabs

I'm a beginner/intermediate level developer/programmer. I've got jQuery-UI-Tabs that I'm building in jQuery like so (they show up and function fine):

   var paymentTabs = $('<div id="paytabs">');
...
var paymentTabList = $('<ul>');

paymentTabs.append(paymentTabList);
if($.inArray('check',options.methods) != -1){
paymentTabList.append('<li><a href="#pay-by-check">Pay with an E-Check</a></li>');
paymentTabs.append(payByCheck);
}
if($.inArray('card',options.methods) != -1){
paymentTabList.append('<li><a href="#pay-by-card">Pay with a Credit/Debit Card</a></li>');
paymentTabs.append(payByCard);
}
if($.inArray('code',options.methods) != -1){
paymentTabList.append('<li><a href="#pay-by-code">Business Office Use Only</a></li>');
paymentTabs.append(payByCode);
}

paymentTabs.tabs({show: function(event, ui) {
item.currentMethod = ui.panel.id;
self._refreshCart();
}
});

paymentTabs.tabs({show: function(event, ui) {
item.currentMethod = ui.panel.id;
self._refreshCart();
}
});

Binding to them does not work:

$( "#paytabs" ).on( "tabsselect", function(event, ui) {
alert("tab has been clicked.");
});

Neither does this:

$( "#paytabs" ).bind( "tabsselect", function(event, ui) {
alert("tab has been clicked.");
});

I also tried tabsactivate instead of tabsselect. I tried selecting by class and by id. I tried selecting transverse and walking the DOM. Eventually, I'm going to use the function that I bind to the tab, to add a 3% fee to the billing total. I will also make this function change the JSON key, attribute "required" to "true" for a specified input element. This is critical for me to get this function bound… I really appreciate the help.

Best Solution

Look here: http://api.jqueryui.com/tabs/#event-activate

Bind to the tab 'activate' event. So when a tab is clicked the activate function is fired.

Like This:

$("#paytabs").tabs({
   activate: function( event, ui ){
    /* do something here */
   }
 });

or

$("#paytabs").on( "tabsactivate", function( event, ui ){
    /* do something here */
});