javascript - jQuery 中的 Bootstrap 菜单单击事件

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 列表，你应该把你的代码放在准备好的函数中:

$(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>