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.
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')
})