jQueryUi tabs loaded dynamically in jQueryUi dialog don't work

I am having a Ruby and Rails application.

I am loading a form using Ajax. The form is an existing rails view. The form in turn contains jQueryUi tabs.

Unfortunately the tabs are not shown when the form is loaded in the jQuery dialog box.

Here is the code for the dialogbox

$('#create_candidate').click( function(e) {

    var url = $(this).attr('href').replace('?','.js?');

    var new_candidate_dlg  = $('<div id="new_candidate_dlg">Loading form ...</div>');



    new_candidate_dlg.load(url);



    new_candidate_dlg.dialog({

      autoOpen:false,

      width: 'auto',

      height: 'auto',

      modal: true,

      close: function() {

        $('new_candidate_dlg').remove();

      },

      open: function() {

        $('#tabs').tabs();

      }

    });

    new_candidate_dlg.dialog('open');

    e.preventDefault();

  });

Strangely, If I change the code like following, the tabs do appear but only when I click on the tabs.

$('#create_candidate').click( function(e) {

    var url = $(this).attr('href').replace('?','.js?');

    var new_candidate_dlg  = $('<div id="new_candidate_dlg">Loading form ...</div>');



    new_candidate_dlg.load(url);



    new_candidate_dlg.dialog({

      autoOpen:false,

      width: 'auto',

      height: 'auto',

      modal: true,

      close: function() {

        $('new_candidate_dlg').remove();

      },

      open: function() {

        $('#tabs').live('click', function (){

          $(this).tabs()

        });

      }

    });

    new_candidate_dlg.dialog('open');

    e.preventDefault();

  });