jQuery UI Tabs select function not working

Question

I have the following jquery which is used to create tabs on my website (wrapped in document ready function):

$('#understanding-water-management').tabs({
    select: function(event, ui) {
        alert('hi');
    }
});

However, on my site the select function isn't been fired on tab change. I have created a fiddle but this works as I would expect it to (it alerts hi on tab change).

The only difference between the two sites is that on my own website I have used a lighter version of jQuery UI where I have only downloaded the Core, Widget (from UI Core) and Tabs (from Widgets) options. Is there any other option I need to download to get the select function above to work - I don't want to use the full jQuery UI as all I need is the tabs so want to make my js files as minimal as possible

Answer 1

jQuery UI 1.10 change the select to beforeActivate (if you want the function to fire before the tab is selected) or activate (if you want it to fire after the tab has been selected)

try

$('#understanding-water-management').tabs({
    beforeActivate: function(event, ui) {
        alert('hi');
    }
});

Answer 2

Try to wrap your code inside DOM ready handler $(function() {...}); to make sure all your DOM elements are loaded properly before executing your jQuery code:

$(function() {
    $('#understanding-water-management').tabs({
        select: function(event, ui) {
            alert('hi');
        }
    });
});

Your jsFiddle works because they've done above part for you by default when you include jQuery.