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 список, вы должны поместить свой код в готовую функции:

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

И не пропуская ни конечных фигурных скобок в этом случае щелчка? Между корпусом переключателя и концом функции?