Question

I am using jQuery UI Tabs.

<div id="tabs">
<ul id="tablist">
    <li><a href="#fragment-1"><span>One</span></a></li>
</ul>
</div>

I have a button that adds new tabs. I use the following code:

var newTabId = $('#tabs').tabs('option', 'selected') + 1;    
$('#tabs').tabs("add",'someUrl.htm','New Tab',newTabId);

(Tab will be added next to the currently selected tab)

Now none of the newly added tabs fire any events such as a click or hover

$('#tablist li').click(function(){
    alert('test message');
});

But events fire properly for the tabs that were there in the initial source code.

How to resolve?

Answer 1

Use live instead.

$('#tablist li').live('click', function(){
    alert('test message');
});

Or better yet, delegate the event

$('#tablist').delegate('li', 'click', function(){
    alert('test message');
});