title: class active not work with jquery
body: <p>I am since yesterday looking like fixing this error. I found several posts on the website but none worked me.
  I have this code html:</p>
  
  <pre><code>&lt;nav class="nav-main mega-menu"&gt;
  &lt;ul class="nav nav-pills nav-main" id="mainMenu"&gt;
      &lt;li&gt;&lt;a href=""&gt;item1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;item2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;item3&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;
          &lt;a class="dropdown-toggle" href="page-services.html"&gt;
              item4
              &lt;i class="icon icon-angle-down"&gt;&lt;/i&gt;
          &lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href=""&gt;item5&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;item6&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;item7&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;item8&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;item9&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;item10&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;item11&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;item12&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and in the  i have this code js:</p>
  
  <pre><code>&lt;script type="javascript"&gt;
     $('.nav-pills').on('click', 'li', function() {
     $('.nav-pills li.active').removeClass('active');
     $(this).addClass('active');
     });
  &lt;/script&gt;
  </code></pre>
  
  <p>also try this:</p>
  
  <pre><code>&lt;script type="javascript"&gt;
     $('.nav-main').on('click', 'li', function() {
     $('.nav-main li.active').removeClass('active');
     $(this).addClass('active');
     });
  &lt;/script&gt;
  </code></pre>
  
  <p>but does not work. Can someone help me? I tried a lot of options I found on the site but this not works</p>