Twitter Bootstrap Question posted in

Why I couldn't get clicking element attribute? – Twitter bootstrap

Actually it’s so simple function but I don’t understand why my function is not working ? I want to get current link class or attribute…but it gave me a ‘undefined’ result.and another issue it’s I want to get id,class or another attribute only when I click to link but if I click another place on my document than it behavior as if I click link link

$(function() {

  var tabMenuLink = $(".nav-tabs li a"),
    tabId = tabMenuLink.attr("class");
  $(document).on("click", tabMenuLink, function() {
    alert(tabId);
  });
});
ul {
  width: 700px;
  margin: 100px auto;
}

ul li {
  padding: 10px;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#otel-ara" aria-controls="otel-ara" role="tab" data-toggle="tab" class="otel-ara-tab">OTEL</a></li>
  <li role="presentation"><a href="#tur-ara" aria-controls="tur-ara" role="tab" data-toggle="tab" class="tur-ara-tab">TUR</a></li>
  <li role="presentation"><a href="#ucak-ara" aria-controls="ucak-ara" role="tab" data-toggle="tab" class="ucak-ara-tab">UÇAK</a></li>
  <li role="presentation"><a href="#gemi-ara" aria-controls="gemi-ara" role="tab" data-toggle="tab" class="gemi-ara-tab">GEMİ</a></li>

</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
Tags:

4

Answers


  1. 0

    This will work. I’m not sure if you lose scope how you did it.

    $(function() {

  var tabMenuLink = $(".nav-tabs li a"),
    tabId = tabMenuLink.attr("class");
  $(document).on("click", tabMenuLink, function() {
    var tabId = $(this).attr('class');
    alert(tabId);
  });
});
    ul {
  width: 700px;
  margin: 100px auto;
}

ul li {
  padding: 10px;
}
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#otel-ara" aria-controls="otel-ara" role="tab" data-toggle="tab" class="otel-ara-tab">OTEL</a></li>
  <li role="presentation"><a href="#tur-ara" aria-controls="tur-ara" role="tab" data-toggle="tab" class="tur-ara-tab">TUR</a></li>
  <li role="presentation"><a href="#ucak-ara" aria-controls="ucak-ara" role="tab" data-toggle="tab" class="ucak-ara-tab">UÇAK</a></li>
  <li role="presentation"><a href="#gemi-ara" aria-controls="gemi-ara" role="tab" data-toggle="tab" class="gemi-ara-tab">GEMİ</a></li>

</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
    Login or Signup to reply.
  2. 0

    your js code is not right.
    Add click event to li a and get class of clicked element.
    try this: 

    $(function() {

  var tabMenuLink = $(".nav-tabs li a");

  tabMenuLink.on("click", function() {
    tabId = $(this).attr("class");
    alert(tabId);
  });
});
    Login or Signup to reply.
  3. 0 
     $(function() {
  $('.nav-tabs li a').on("click", function() {
    alert($(this).attr('class'));
    alert($(this).attr('id'));
  });
});

    Add attribute id in your li tag And change your Jquery Code

    Login or Signup to reply.
  4. 0

    You can also use like this

    $(function() {
   $(document).on("click",'.nav-tabs li a', function() {
      tabId = $(this).attr("class");
      alert(tabId);
   });
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search