ASP.NET LinkButton 未在 Bootstrap 选项卡内触发

Question

使用 Bootstrap's Tabs，ASP.NET LinkButtons 在选项卡内容 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");
    }

当 LinkButton 位于 <div class="tab-content"> div 内时，添加 OnClick 事件的方法均未触发。奇怪的是，asp 按钮工作得很好。但是，我无法在按钮内部使用 Glyphicons，或者如果我不得不满足于此，我也无法将 Glyphicons 本身用作按钮。 -- 我还需要使用 CommandArgument/CommandName 的能力，所以一个简单的 HTML 按钮也不能满足我的需要。

Answer 1

问题可能出在初始化tabs插件的JS上。看看那里的 preventDefault：

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

考虑将 class 放在您希望用作选项卡的按钮上，并将您的 JS 修改为以下内容：

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

Answer 2

实际问题出在代码本身..

解析器错误消息：标签包含重复的 'role' 属性。

能否请您检查代码。

<li role="presentation" class="active" runat="server" id="liQuestions" href="#questions" role="tab" data-toggle="tab">
  <asp:Button runat="server" ID="btnQuestions" />
</li>

添加了 2 个角色（角色="presentation" 和角色="tab"）。

另外别忘了加上“;”在 lbQuestions.Click += lbComments_Click

之后

它适用于 me.Hope 你遇到了问题。

ASP.NET LinkButton 未在 Bootstrap 选项卡内触发

ASP.NET LinkButton not firing inside of Bootstrap Tabs

asp.net

twitter-bootstrap

onclick

asplinkbutton

ASP.NET LinkBut​​ton 未在 Bootstrap 选项卡内触发

ASP.NET LinkButton not firing inside of Bootstrap Tabs

asp.net

twitter-bootstrap

onclick

asplinkbutton

ASP.NET LinkButton 未在 Bootstrap 选项卡内触发