How can I associate a live event with an index selector using jQuery?

Question

I have the following HTML:

<ul id="tabs">
    <li><a href="...">One</a></li>
    <li><a href="...">Two</a></li>
    <li><a href="...">Three</a></li>
</ul>

I want to perform a unique action when someone clicks on each of the links.

I tried the following and it did not work

$("#tabs li").eq(1).live('click',function(){alert('ONE....');});
$("#tabs li").eq(2).live('click',function(){alert('TWO......');});
$("#tabs li").eq(3).live('click',function(){alert('THREE......');});

Any idea how I can perform a unique action when someone on the link?

Thanks

Answer 1

Give the li's ids:

<ul id="tabs"> 
    <li id="tab1"><a href="...">One</a></li> 
    <li id="tab2"><a href="...">Two</a></li> 
    <li id="tab3"><a href="...">Three</a></li> 
</ul>

Then your script would just be:

$('#tab1').click(function() { alert('tab1'); });
$('#tab2').click(function() { alert('tab2'); });
$('#tab3').click(function() { alert('tab3'); });

Answer 2

I believe you're going for

$("#tabl li:eq(0)").live('click', ...)
$("#tabl li:eq(1)").live('click', ...)
$("#tabl li:eq(2)").live('click', ...)

Make sure you start with zero, and place the 'eq' selector inside the same selector as the 'li'. The rest of your code is poifect. :-)