asp.nettwitter-bootstraponclickasplinkbutton

ASP.NET LinkButton not firing inside of Bootstrap Tabs


Using Bootstrap's Tabs, ASP.NET LinkButtons are not firing events while inside of the tab-content div.

HTML

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active" runat="server" id="liQuestions" href="#questions" role="tab" data-toggle="tab">
        <asp:Button runat="server" ID="btnQuestions" />
    </li>
    <li role="presentation" class="active" runat="server" id="liComments" href="#comments" role="tab" data-toggle="tab">
        <asp:Button runat="server" ID="btnComments" />
    </li>
    <li role="presentation" class="active" runat="server" id="liAttachments" href="#attachments" role="tab" data-toggle="tab">
        <asp:Button runat="server" ID="btnAttachments" />
    </li>
    <li role="presentation" class="active" runat="server" id="liTracking" href="#tracking" role="tab" data-toggle="tab">
        <asp:Button runat="server" ID="btnTracking" />
    </li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="questions">
        <asp:LinkButton runat="server" ID="lbQuestions" CausesValidation="false"></asp:LinkButton>
    </div>
    <div role="tabpanel" class="tab-pane" id="comments">
        <asp:LinkButton runat="server" ID="lbComments" OnClick="lbComments_Click"></asp:LinkButton>
    </div>
    <div role="tabpanel" class="tab-pane" id="attachments">
    </div>
    <div role="tabpanel" class="tab-pane" id="tracking">
    </div>
</div>

C#

    protected void Page_Load(object sender, EventArgs e)
    {
        lbQuestions.Click += lbComments_Click
    }
    ...
    protected void lbComments_Click(object sender, EventArgs e)
    {
        Console.Write("This breakpoint never gets hit");
    }

Neither methods of adding the OnClick event are firing while the LinkButtons are inside of the <div class="tab-content"> div. Oddly, asp Buttons work perfectly. However I'm unable to use the Glyphicons inside of the Buttons, or just Glyphicons as buttons themselves if I have to settle for that. -- I also need the ability to use CommandArgument/CommandName, so a simple HTML button will not suite my needs either.


Solution

  • The problem is likely the JS that initializes the tabs plugin. Look at that preventDefault there:

    $('#myTabs a').click(function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
    

    Consider putting a class on the buttons that you want to behave as tabs and modify your JS to the following:

    $('#myTabs a.myTabbedButton').click(function (e) {
      e.preventDefault()
      $(this).tab('show')
    })