jQuery - events won't fire for dynamically created tab elements..

Question

Hi,

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

You probably need to bind the element to an event when it's created, if it's of any interest .clone(true) will clone an item and maintain it's bind with an event.

Answer 2

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');
});