class active no funciona

[RSmith]

Hola gente, tengo un problema al querer agregar la clase active a los elementos de un ul en la navegacion.
Tengo este codigo HTML:

Código HTML:

<nav class="nav-main mega-menu">
<ul class="nav nav-pills nav-main" id="mainMenu">
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
    <li><a href="">item3</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" href="page-services.html">
            item4
            <i class="icon icon-angle-down"></i>
        </a>
        <ul class="dropdown-menu">
            <li><a href="">item5</a></li>
            <li><a href="">item6</a></li>
            <li><a href="">item7</a></li>
            <li><a href="">item8</a></li>
            <li><a href="">item9</a></li>
        </ul>
    </li>
    <li><a href="">item10</a></li>
    <li><a href="">item11</a></li>
    <li><a href="">item12</a></li>
</ul>
</nav> 

y dentro de la etiqueta head tengo este script js:

Código:

<script type="javascript">
        $('.nav-pills').on('click', 'li', function() {
            $('.nav-pills li.active').removeClass('active');
            $(this).addClass('active');
            return false;
        });
</script>

en teoria, al ahcer clic sobre el item 1 por ejemplo, esde deberia cambiar su color a blanco y su bg a azulm ya que asi lo indico en el css:

ul.nav-pills > li.active > a,
ul.nav-pills > li.active > a:hover,
ul.nav-pills > li.active > a:focus {
background-color: #0088cc;
}

pero por alguna razon no funciona. Pero si agrego la "class="active" directamente editando el html si funciona. Probando el codigo en esta pagina: http://jsfiddle.net/pL4zgdzL/1/ si me esta funcionando, por lo que no entiendo cual es el error

[Djoaq]

Cuando haces this estas refiriendo al li y no al elemento a, deberias usar o el metodo : .children() o el selector de hijo this > li .

Un saludo!

[RSmith]

Hola gracias por contestar.
Como se usa el metodo .children() en este caso? me fije en la documentacion de jquery pero no entendi, me mareé