jQuery UI tabs javascript click function not working

I am using jQuery UI tabs, but I am having an issue.

My javascript code:

 $(function() {
  $("#tabs").tabs();
 }); 

My HTML:

<div class="demo">
  <div id="tabs">
    <ul开发者_开发百科>
      <li><a href="#tabs-1">Eat</a></li>
    </ul>
    <div id="tabs-1">
      tab 1
    </div>
    <div id="tabs-2">
      tab 2
    </div>
    <div id="tabs-3">
      tab 3
    </div>
  </div>  
</div><!-- End demo -->

I am using another script.js file. from that I am calling one click function.

$("#tabs-2").click(function()
{
  alert("This is tab3");    
});

This function is not working. I want to display some data from the database on clicking each tab. How to write js function using jQuery? Please help me.

Thanks, Raj

What type of error are you getting? Can you use Firebug to help debug the issue you are having w/your jQuery?

Have you tried:

$("a[href=#tabs-2]").click(function()
{
  alert("This is tab3");    
});

This is the correct code you should use

HTML:

<div class="demo">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Eat</a></li>
      <li><a href="#tabs-2">Drink</a></li>
      <li><a href="#tabs-3">Sleep</a></li>
    </ul>
    <div id="tabs-1">
      tab 1
    </div>
    <div id="tabs-2">
      tab 2
    </div>
    <div id="tabs-3">
      tab 3
    </div>
  </div>  
</div>

jQuery:

$(function() {
    $("#tabs").tabs();

    $("#tabs-2").click(function() {
        alert("This is tab2");    
    });
}); ​

You can verify it working here.

Hope it helps

Solution given by Lorenzo is not working for me but the solution given by keith_c works like charm. I did find out one more way to to accomplish this requirement, as it's tough for me to put code here, you can have a look at it on http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html

Hope that helps someone..