title: Bootstrap Carousel's active item issue
body: <p>I'm trying to learn about carousel of bootstrap base on <a href="http://bootsnipp.com/snippets/VolV" rel="nofollow noreferrer">this one</a>.
  But when i tried to make  simulated one. But it won't work as its demo. 
  The active item can't change when user click on another <code>&lt;li&gt;</code>. I tried but still not figure out why. 
  This is my HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
  
      &lt;ul class="nav nav-pills nav-justified"&gt;
        &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;a href="#"&gt;About&lt;small&gt;Lorem ipsum dolor sit&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;a href="#"&gt;Projects&lt;small&gt;Lorem ipsum dolor sit&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;a href="#"&gt;Portfolio&lt;small&gt;Lorem ipsum dolor sit&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="item active"&gt;
          &lt;img src="http://placehold.it/1200x400/cccccc/ffffff" /&gt;
        &lt;/div&gt;
        &lt;!-- End Item --&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="http://placehold.it/1200x400/999999/cccccc"&gt;
        &lt;/div&gt;
        &lt;!-- End Item --&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="http://placehold.it/1200x400/dddddd/333333"&gt;
        &lt;/div&gt;
        &lt;!-- End Item --&gt;
      &lt;/div&gt;
      &lt;!-- End Carousel Inner --&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my JS:</p>
  
  <pre><code>$(document).ready(function() {
    $('#myCarousel').carousel({
      interval: 4000
    });
    $('#myCarousel.nav a').on('click', function() {
      clickEvent = true;
      $('.nav li').removeClass('active');
      $(this).parent().addClass('active');
    });
  });
  </code></pre>
  
  <p>Could someone tell me what's wrong? I'm still newbie with this jquery.
  On his demo, why did he use like this:</p>
  
  <pre><code>$('#myCarousel').on('click', '.nav a', function() {...});
  </code></pre>
  
  <p>I thought we can only use :</p>
  
  <pre><code>$('#myCarousel').on('click',function(){...});
  </code></pre>
  
  <p>This is what i was learnt from <a href="https://api.jquery.com/click/" rel="nofollow noreferrer">Jquery click()</a></p>
  
  <p>This is my <a href="https://drive.google.com/open?id=0BzZZN5V9Ma4pRmFTNXoxVTNtNTg" rel="nofollow noreferrer">source</a></p>