jQuery UI tabs javascript click function not working

Question

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

In the editor used here on stackoverflow, you need to ensure code is indented with 4 spaces. The "101010" icon will format a block of code. — Bobby Jack
– Bobby Jack, Commented Oct 14, 2010 at 23:31

keith_c · Accepted Answer · 2010-10-14 23:54:30Z

6

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

edited Oct 14, 2010 at 23:54

answered Oct 14, 2010 at 23:32

keith_c

2,4321 gold badge14 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lorenzo · Accepted Answer · 2010-10-14 23:55:05Z

1

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

edited Oct 14, 2010 at 23:55

answered Oct 14, 2010 at 23:18

Lorenzo

29.4k50 gold badges129 silver badges224 bronze badges

1 Comment

trushkevich Over a year ago

$("#tabs-2").click is not working, while $("a[href=#tabs-2]").click is.

Ekta · Accepted Answer · 2011-09-09 20:38:02Z

0

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..

answered Sep 9, 2011 at 20:38

Ekta

372 bronze badges

Collectives™ on Stack Overflow

jQuery UI tabs javascript click function not working

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related