Tengo una lista la cual quiero sacar el `id` de cada elemento `a` esta lista es llenada dinamicamente por ajax.

Utilizo jQuery 2.1.4 y ya lo e probado en Firefox y en Chrome

Este es mi codigo :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(document).ready(function() {
     $("#lista_categoria > li").on('click', 'a', function () {
           var id_categoria = this.id;
            alert(id_categoria);
        });
        });

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <div class="box-body border-radius-none">
<div col-xs-12="">
<ul class="nav nav-pills nav-stacked" id="lista_categoria">
<li class=""><a id="16" href="#" data-toggle="tab" aria-expanded="false">ABARROTE (1)</a></li>
<li class=""><a id="1" href="#" data-toggle="tab" aria-expanded="false">ACEÍTES Y GRASAS (1)</a></li>
<li class=""><a id="7" href="#" data-toggle="tab" aria-expanded="false">CUIDADO PERSONAL (1)</a></li>
<li class=""><a id="6" href="#" data-toggle="tab" aria-expanded="false">HOGAR Y LIMPIEZA (3)</a></li>
<li class="active"><a id="12" href="#" data-toggle="tab" aria-expanded="true">LACTEO (3)</a></li></ul>
</div>
</div>
<!-- end snippet -->

Como pueden ver aqui funciona con normalidad pero cuando lo ejecuto en mi pc me marca el siguiente error por llamarlo asi:

> Cadena vacía pasada a getElementById().


[![introducir la descripción de la imagen aquí][1]][1]


  [1]: https://i.sstatic.net/Vcc28.png