Bootstrap menu click event in 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":
});

Here I am unable to recieve the click event . Looks like I am making some mistake. Can someone show me the right way.

i think you have declared your js before the elements has been loaded — Semi-Friends
– Semi-Friends, Commented Feb 23, 2016 at 12:25
<html><form>here is my tab</form>here my script refernce</html> . My js reference is in the layout. if i look at the sorce i will get the above structure — jubi
– jubi, Commented Feb 23, 2016 at 12:28
ow try to see the console.. you must be receiving an error on your code.. the closing brackets are not equal — Semi-Friends
– Semi-Friends, Commented Feb 23, 2016 at 12:28
try binding the click to the document instead eg ($(document).on("click", "#Mydatatabs li", function (e) { ...) see if that helps -- jsfiddle.net/5d0rxg88 — Tasos
– Tasos, Commented Feb 23, 2016 at 12:36

Zakaria Acharki · Accepted Answer · 2016-02-23 12:35:14Z

2

Because the JS is loaded first the DOM is not ready yet so it could not find the Mydatatabs list, you should put your code inside ready function :

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

Hope this helps.

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

edited Feb 23, 2016 at 12:35

answered Feb 23, 2016 at 12:28

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jubi Over a year ago

Yes, it worked. It resolves my issue.Thank you for your time .

Community · Accepted Answer · 2017-05-23 12:31:27Z

0

So, first you have to put your jquery code inside a document ready statement. See the example:

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

This is to be certain that the element to which the .click() event is bound has been created when the function executes.

For further explanation, look this response: Why should $.click() be enclosed within $(document).ready()?

And is not missing any end curly braces in this click event? In between switch case and end of the function?

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Feb 23, 2016 at 12:47

Thiago Verney

31 bronze badge

2 Comments

jubi Over a year ago

i have not copied the complete code . I wanted to show how i was triggering the click event.

Thiago Verney Over a year ago

Ok, I see! Thanks, Jubi.

Collectives™ on Stack Overflow

Bootstrap menu click event in jQuery

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related