Bootstrap jQuery 中的菜单点击事件

Question

HTML :

<ul id="Mydatatabs" 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="Tabtab1Link">tab1</a></li>
    <li><a data-toggle="tab" href="#tab2" id="Tabtab2Link">tab2</a></li>
    <li><a data-toggle="tab" href="#tab3" id="Tabtab3Link">tab3</a></li>
    <li><a data-toggle="tab" href="#tab4" id="Tabtab4Link">tab4</a></li>
</ul>

JS :

$("#Mydatatabs li").click(function (e) {
    e.preventDefault();

    alert(1);
    var MyID = $("#MyID").val();

    alert(2);
    switch ($(this).children(":first").attr("href")) {
    alert(3);
        case "#tab1":
});

这里我无法接收到点击事件。看起来我犯了一些错误。谁能告诉我正确的方法。

Answer 1

因为 JS 首先加载 DOM 还没有准备好所以它找不到 Mydatatabs 列表，你应该把你的代码放在 ready 函数中：

$(function(){
    //Your code here
})

希望对您有所帮助。

$(function(){

  $("#Mydatatabs li").click(function (e) {
    e.preventDefault();
    alert(1);
    var MyID = $("#MyID").val();
    alert(2);
  });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul id="Mydatatabs" 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="Tabtab1Link">tab1</a></li>
  <li><a data-toggle="tab" href="#tab2" id="Tabtab2Link">tab2</a></li>
  <li><a data-toggle="tab" href="#tab3" id="Tabtab3Link">tab3</a></li>
  <li><a data-toggle="tab" href="#tab4" id="Tabtab4Link">tab4</a></li>
</ul>

Answer 2

因此，首先您必须将 jquery 代码放入文档就绪语句中。看例子：

$(document).ready(function(){
    //... code
});

这是为了确定绑定.click()事件的元素在函数执行时已经创建。

如需进一步说明，请查看此回复：Why should $.click() be enclosed within $(document).ready()?

并且在这个点击事件中没有遗漏任何结束花括号？在 switch case 和函数结束之间？

Bootstrap jQuery 中的菜单点击事件

Bootstrap menu click event in jQuery

javascript

asp.net-mvc

jquery

twitter-bootstrap

angular-ui-bootstrap