title: Bootstrap tabs click event
body: <p>I used bootstrap tabs and i would like to add click event for tab id but it doesn't work for me when i click on tab with id step2 i can't show the console log(click).
  above my code, someone can help please?</p>
  
  <p>thnx</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  jQuery(document).ready(function($) {
  $('.step2').on('click', function (event) {
              event.preventDefault();
  console.log("click step2");
  
      //other actions
        });
  
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
   &lt;div class="container" id="myContainer"&gt;
  
     &lt;div class="navbar"&gt;
        &lt;div class="navbar-inner"&gt;
              &lt;ul class="nav nav-pills"&gt;
               &lt;li class="active"&gt;&lt;a href="#step1" data-toggle="tab"&gt;Step1&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#step2" data-toggle="tab" &gt;Step2&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#step3" data-toggle="tab"&gt;Step3&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="tab-content"&gt;
  
  
        &lt;div class="tab-pane fade" id="step1"&gt;
         Step1
        &lt;/div&gt;
  
  
  
        &lt;div class="tab-pane fade" id="step2"&gt;
  
        step2
  
        &lt;/div&gt;
        &lt;div class="tab-pane fade" id="step3"&gt;
  
  
        step3
        &lt;/div&gt;
  
     &lt;/div&gt;&lt;!-- end tab content --&gt;
  
  &lt;/div&gt;  &lt;!-- end container --&gt;
  
  &lt;/html&gt;
  </code></pre>