jquery ui tabs load event does not fire

Question

I have got the following very simple code:

function init() {
    var articleTabs = $('#articleTabs');
    articleTabs.tabs('add',
            admin.pageVars.siteRoot + '/articles/themes/' + admin.pageVars.params.id, 'Temas');
    articleTabs.tabs({
        load : function(event, ui) {
            $('.jsonForm').jsonForm();
        }
    });
}

This successfully adds a new tab panel to an existing tab control. However upon activation, the load function does never fire.

What is my mistake? (There are no javascript exceptions)

Answer 1

Try this instead, since you're not doing it at the time of the tabs creation:

function init() {
  var articleTabs = $('#articleTabs');
  articleTabs.bind('tabsload', function() {
    $('.jsonForm').jsonForm();
  });
  articleTabs.tabs('add', admin.pageVars.siteRoot + '/articles/themes/' + admin.pageVars.params.id, 'Temas');
}

This places it first to be safe, but this binds to the tabsload event instead of the load option/handler, which isn't set after initial widget creation.