jQuery UI Tabs "Select" Event Being Overridden by "Click" Event -- Uncaught TypeError

I'm having some trouble selecting a tab programmatically. My tabs are loading inside a Fancybox dialog window, which is launched on click of a link. Basically, I want to perform certain actions any time a tab is selected, and also select a specific tab when a link is clicked.

I am initializing jQuery UI Tabs with the select event like so:

$('#tabs').tabs({
 
     select: function(event, ui) {
 
         // grab value of a form input
         var text = $(someElement).val();
 
         // check its length
         if ( text.length > 0 ) {
            // do stuff
         }
     }
 })
 

Later on in my JS file I have the following:

$(document).on('click', 'a.edit', function() {
     if($category == 'book') {
         // load the tab specific to the 'book' category
         $('#tabs').tabs({ selected: 3 });
     }
 })
 

When I click the a.edit link for an item in the "book" category, my console throws this error:

Uncaught TypeError: Cannot read property 'length' of undefined
 

Then, instead of the tabs loading in the Fancybox, nothing happens. This error is not thrown when I click the link for items that are not in the book category. Thus, two things are painfully evident:

1. I am a n00b


2. My select event is apparently getting overridden by the click event, so text is not set

I've tried setting a default for text at the top of my JS file but that doesn't work. My question, then, is:

What is the correct way to initialize UI Tabs with a select event, while also being able to programmatically select a tab with a click event?

Or, more concisely,

Why am I getting that damn error?

---