Detect which tab was clicked with jQuery

Question

I have some tabs:

<ul id="tabs">
    <li><a href="#tab-allData">All data</a></li>
    <li><a href="#tab-someOtherData">Some other data</a></li>
    <li><a href="#tab-xyData">xyData</a></li>
</ul>

I want to recognize which tab was clicked and remove the tab- prefix from the href.

I have tried this js function:

$('#tabs').click(function (event) {        
    activeTab = $(this).attr('href').split('-')[1];        
    FurtherProcessing(activeTab);        
});

but I get the following error:

TypeError: $(...).attr(...) is undefined activeTab = $(this).attr('href').split('-')[1];

Answer 1

<ul id="tabs">
<li><a href="#tab-allData">All data</a></li>
<li><a href="#tab-someOtherData">Some other data</a></li>
<li><a href="#tab-xyData">xyData</a></li>
</ul>

$('#tabs').on("click", "li", function (event) {         
  var activeTab = $(this).find('a').attr('href').split('-')[1];
  FurtherProcessing(activeTab);        
});

Demo: http://jsfiddle.net/6dRH6/2/