Q:

Bootstrap tabs click event

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?
thnx
<html>

<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.step2').on('click', function (event) {
            event.preventDefault();
console.log("click step2");

    //other actions
      });

});
</script>
</head>

 <div class="container" id="myContainer">

   <div class="navbar">
      <div class="navbar-inner">
            <ul class="nav nav-pills">
             <li class="active"><a href="#step1" data-toggle="tab">Step1</a></li>
             <li><a href="#step2" data-toggle="tab" >Step2</a></li>
               <li><a href="#step3" data-toggle="tab">Step3</a></li>

            </ul>
      </div>
   </div>
   <div class="tab-content">

      <div class="tab-pane fade" id="step1">
       Step1
      </div>

      <div class="tab-pane fade" id="step2">

      step2

      </div>
      <div class="tab-pane fade" id="step3">

      step3
      </div>

   </div><!-- end tab content -->

</div>  <!-- end container -->

</html>

A:

I have added an id in your <a> tag 
Please see working example below
$(document).ready(function()
{   
    $('#button').click(function() {
            event.preventDefault();
            alert("click step2");

    });
});

https://jsfiddle.net/fdzxLydg/

