jQuery click event not working.

[deepsingh]

I am using jquery tabs but default it is working on my site but once a part of my site is reloading tabs not working.

Please check this url:
http://www.emptask.com/professionalw...otein-isolate/

click on tabs it is working first time, but once you change WEIGHT attribute from dropdown, tabs not working.

jQuery(document).ready(function($){
  $(".menu  li").click(function(e){
    switch(e.target.id){
      case "news":
        //change status & style menu
        $("#news").addClass("active");
        $("#tutorials").removeClass("active");
        $("#links").removeClass("active");
        $("#sales").removeClass("active");
        $("#share").removeClass("active");
        //display selected division, hide others
        $("div.news").fadeIn();
        $("div.links").css("display", "none");
        $("div.tutorials").css("display", "none");
        $("div.sales").css("display", "none");
        $("div.share").css("display", "none");
      break;
      
        case "tutorials":
        //change status & style menu
        $("#news").removeClass("active");
        $("#tutorials").addClass("active");
        $("#links").removeClass("active");
        $("#sales").removeClass("active");
        $("#share").removeClass("active");
        //display selected division, hide others
        $("div.tutorials").fadeIn();
        $("div.news").css("display", "none");
        $("div.links").css("display", "none");
        $("div.sales").css("display", "none");
        $("div.share").css("display", "none");
      break;
      
      case "links":
        //change status & style menu
        $("#news").removeClass("active");
        $("#tutorials").removeClass("active");
        $("#links").addClass("active");
        $("#sales").removeClass("active");
        $("#share").removeClass("active");
        //display selected division, hide others
        $("div.links").fadeIn();
        $("div.news").css("display", "none");
        $("div.tutorials").css("display", "none");
        $("div.sales").css("display", "none");
        $("div.share").css("display", "none");
      break;
          
        case "share":
        //change status & style menu
        $("#news").removeClass("active");
        $("#tutorials").removeClass("active");
        $("#links").removeClass("active");
        $("#sales").removeClass("active");
        $("#share").addClass("active");
        //display selected division, hide others
        $("div.share").fadeIn();
        $("div.news").css("display", "none");
        $("div.tutorials").css("display", "none");
        $("div.links").css("display", "none");
        $("div.sales").css("display", "none");
      break;
      
      case "sales":
        //change status & style menu
        $("#news").removeClass("active");
        $("#tutorials").removeClass("active");
        $("#links").removeClass("active");
        $("#sales").addClass("active");
        $("#share").removeClass("active");
        //display selected division, hide others
        $("div.sales").fadeIn();
        $("div.news").css("display", "none");
        $("div.tutorials").css("display", "none");
        $("div.links").css("display", "none");
        $("div.share").css("display", "none");
      break;
    }
    //alert(e.target.id);
    return false;
  });
});

I am including this file and jquery file on template file.

Please help me

[PhilipToop]

Not following the logic entirely but I think you are removing the tabs from the page when the weight changes and then adding some new ones. The 'click' event listener that you have established in the code you placed in your post will be destroyed the you remove the tabs from the page. You must reinstate them for the new tabs.

[AussieJohn]

The 'click' event listener that you have established in the code you placed in your post will be destroyed the you remove the tabs from the page.

We can fix this using event delegation. If the tab content is replaced, but not the entire tabs div (hope I'm making sense here) then event delegation could be applied to the tabs container element

I've taken the liberty to rewrite the code deepsingh wrote to show what we can do to optimize it.

I've made a JS fiddle if you want to see a live demo. http://jsfiddle.net/GeekyJohn/a9Ekh/

Let's consider some sample markup for a tabs system. We'll need a generic container for the tabs, a tabs navigation area and a tabs content area.

<div class="tabs">
    <ul class="tabs-nav">
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
        <li><a href="#tab4">Tab 4</a></li>
    </ul>
    <div class="tabs-content">
        <div class="tab-panel" id="tab1">
            <h3>This is tab 1</h3>
            <p>This is tab content</p>
        </div>
        <div class="tab-panel" id="tab2">
            <h3>This is tab 2</h3>
            <p>This is tab content</p>
        </div>
        <div class="tab-panel" id="tab3">
            <h3>This is tab 3</h3>
            <p>This is tab content</p>
        </div>
        <div class="tab-panel" id="tab4">
            <h3>This is tab 4</h3>
            <p>This is tab content</p>
        </div>
    </div>
</div>

As you can see, each tab panel has its own ID. This ID is something we can link to. The tabs navigation links to each tab individually using the hash.

Let's take a look at the CSS

body {
    background:#999;
    padding:10px;
    font:14px/1.4 normal Arial, sans-serif;
}
 
.tabs {
    margin:10px 0;
    width:500px;
}
 
.tabs ul.tabs-nav {
    margin:0;
    padding:0;
}
 
.tabs ul.tabs-nav li {
    float:left;
    list-style:none;
    margin:0;
}
 
.tabs ul.tabs-nav li a{
    border:1px solid #111;
    border-radius:4px 4px 0 0;
    border-bottom-color:transparent;
    display:block;
    padding:3px 10px;
    margin-right:5px;
    background:#fff;
    position:relative;
    top:1px;
}
 
.tabs ul.tabs-nav li.active a{
    background:#ddd;
    border-bottom:1px solid #ddd;
}
 
.tabs .tabs-content .tab-panel{
    clear:both;    
    padding:10px;
    border:1px solid #111;
    background:#ddd;
}
 
/* we only hide the tabs if .tabs-active is present, so
  if there is no JS, the content is still available */
.tabs.tabs-active .tabs-content .tab-panel{
    display:none;
}
 
.tabs.tabs-active .tabs-content .tab-panel.active{
    display:block;
}
 
.tabs .tab-panel h3 {
    font-weight:bold;
    font-size:18px;
    margin:0 0 10px;
}

This should all be pretty sensible. It's setting up some styles for the tabs and tab panels. The interesting bit is where we see:

.tabs.tabs-active .tabs-content .tab-panel{
    display:none;
}
 
.tabs.tabs-active .tabs-content .tab-panel.active{
    display:block;
}

We use .tabs-active here. It's a CSS class that's added using JavaScript which gives us a hook to work with in the CSS. This way the tabs will always show if there is no JavaScript available.

And finally, the JavaScript

$(document).ready(function() {
 
    //a css hook so we know JS is available 
    $(".tabs").addClass("tabs-active")
 
    //lets use event delegation so we only have to set up an event handler once.
    $(".tabs").delegate(".tabs-nav a", "click", function(e) {
 
        e.preventDefault(); //don't allow the default click on the link to occur
 
        // 'this' is the currently clicked element
        var $this = $(this), 
            $container = $this.closest(".tabs"); //handy reference
 
        //hide all tabs in the current container
        $container.find(".active").removeClass("active");
 
        //set the current tab to active
        $this.closest("li").addClass("active");
 
        //show the currently selected tab
        //we use the clicked link's href as it points to the tab we want to activate
        $container.find( $this.attr("href") ).addClass("active");
 
});
 
 
    //set the first tab and it's content box to active for each tab container
    $(".tabs .tabs-nav li:first-child, .tabs .tab-panel:first-child").addClass("active");
 
 
});

Hopefully the comments explain well enough what the code does.

If you were to replace the contents of any give <div class="tab"></div> you won't have to set up the events again. (The only trouble is you will need to set the first tab and panel active again)

As you can see from this JavaScript, there is no need to reference the tabs using their IDs or classes individually through switch statements to figure out which one is clicked. Everything is based on there only ever being 1 tab active, therefore, rather than specifically setting other tabs as inactive, we hide all tabs and only show the one we want to make active. A small, subtle different, but an important one if we want to keep our code lean and performant.

This little snippet of code is quite extendible, the tabs IDs for example can simply be changed, so long as you change the links to match them.