title: Managing Tab Click Event through jQuery and Repeater
body: <p>I have a repeater which displays and data bind the source of tab links. Here is the code:</p>
  
  <pre><code>protected void rptTab_ItemBound(Object sender, RepeaterItemEventArgs e)
  {
      if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
      {
          Item i = e.Item.DataItem as Item;
          Link hlTabLink = e.Item.FindControl("hlTabLink") as Link;
          hlTabLink.Target = Sitecore.Links.LinkManager.GetItemUrl(i);
          hlTabLink.DataSource = i.Paths.FullPath;
          hlTabLink.Field = "Title";
      }
  }
  </code></pre>
  
  <p>Now this is my markup:</p>
  
  <pre><code>&lt;asp:Repeater ID="rptTab" runat="server" OnItemDataBound="rptTab_ItemBound"&gt;
              &lt;ItemTemplate&gt;
                  &lt;li id= "liTabTest" runat = "server"&gt;
                      &lt;a&gt;
                          &lt;sc:Link ID = "hlTabLink" Field = "scTabLink" onclick = "TabClick()" runat ="server"&gt;&lt;/sc:Link&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ItemTemplate&gt;
         &lt;/asp:Repeater&gt;
  </code></pre>
  
  <p>And this is the jQuery which is adding CSS class dynamically based on which item is selected:</p>
  
  <pre><code>$(document).ready(function () {
      init();
  });
  
  function init() {
      $("ul#Tab-labels li").removeClass("tab-label TabbedPanelsTabSelected");
      $("ul#Tab-labels li:first").addClass("tab-label TabbedPanelsTabSelected");
  };
  
  function TabClick() {
      alert('test');
  };
  </code></pre>
  
  <p>Now you can see that I am displaying the CSS file based on the index of the tab. I also have to add the click event in that jQuery. So there are basically two things that I am confused:</p>
  
  <ul>
  <li>My click event in jQuery is not getting called :(</li>
  <li>From jQuery I have to know in the click event that which page it has
  to go through? So that I have to get from codebehind or what? Like a
  hidden field and store the tab pages in that, then fetch out from
  jQuery.</li>
  </ul>
  
  <p>How should I resolve this? Please help!</p>