[jQuery] JQuery Tabs not loading on first click

[sukhminder]

Tabs are not loading on the first click. I have a link which is like:

<li class="news"><a href="javascript:loadTabs('news')">Headlines</a></
li>

when user clicks on this it calls the following function:

<script>
function loadTabs(filename) {
        $('head').append('<link type="text/css" href="'+ webroot + 'css/
ui.tabs.css" rel="stylesheet" />');
        $.getScript(webroot + "script/ui.tabs.js");
        $.get(webroot + "html/"+filename+".htm", function(data){
                $("#cbody").html(""+data+"");
                $("#newscontainer ul").tabs({ remote: true, fxSlide: true, 
fxFade:
true, fxSpeed: 'normal' });
        });
}
</script>

this function loads the required css and javascript tabs file to
display tabs; but when I click on it it gives me the following error:

$("#newscontainer ul").tabs is not a function
[Break on this error] $("#newscontainer ul").tabs({ remote: true,
fxSlide: true, fxFade: true, fxSpe...

However, it does work when I click on the link again. Any idea why
this is happening? This wasn't happening on my dev server. Here is the
link to the actual site: http://www.ranglapunjab.net/

Thanks in advance.