Jquery 使用 bootstrap 选项卡触发事件

Question

我正在使用 bootstrap 选项卡

    @Html.ValidationSummary(true)
        <ul id="MyTabs" class="nav nav-tabs nav-justified">
            <li class="active"><a data-toggle="tab" href="#details" id="TabDetailsLink">Personal
                Details</a></li>
            <li><a data-toggle="tab" href="#tab1" id="Tab1">T1</a></li>
            <li><a data-toggle="tab" href="#tab2" id="Tab2">T2</a></li>

        </ul>

and i use jquery for catch the event
$(".MyTabs li").click(function (e) {
    alert(2);
});

我的期望是每次更改选项卡时都能收到警报。但是事件并没有被解雇。我的是 ASP.NET MVC 4 web api 应用程序。

Answer 1

您的 jQuery 选择器有误！ MyTabs 是 Id。所以用 # 前缀

这应该有效。

$("#MyTabs li").click(function (e) {
    e.prevelitDefault(); 
    alert(2);
});

或者，如果将此 class 添加到您的 ul 元素，则可以使用现有的 jQuery 选择器。

<ul id="MyTabs" class="MyTabs nav nav-tabs nav-justified">

当使用 Id 作为您的 jQuery 选择器时，请使用 # 前缀（例如：$("#myElementUniqueID")）

使用 css class 作为 jQuery 选择器时 ，使用 . 前缀（例如：$(".myCssClss") )

Jquery 使用 bootstrap 选项卡触发事件

Jquery event fire with bootstrap tab

asp.net-mvc

jquery

razor

asp.net-mvc-4

bootstrap-modal