I have a list which I want to get the id
of each element a
this list is filled dynamically by ajax.
I use jQuery 2.1.4 and I've already tried it in Firefox and Chrome
This is my code:
jQ from ajax:
$(document).ready(function () {
$.ajax({
url: baseurl + 'Catalogo/obtener_categoria',
type: "POST",
dataType: "JSON",
success: function (data)
{
$('#lista_categoria').empty();
$('#lista_categoria').append(data);
}
});
// obtener_productos(6);
});
Driver:
public function obtener_categoria() {
$niveles = $this->catalogo->obtener_categoria();
$resp = '';
foreach ($niveles as $row) {
$resp .= '<li><a id="' . $row ['id_categoria'] . '" href="#" data-toggle="tab">' . $row ['nombre'] . ' (' . $row ['Total'] . ')</a></li>';
}
echo json_encode($resp);
}
The result is this:
And finally the code that generates me with the snippet:
$(document).ready(function() {
$("#lista_categoria > li").on('click', 'a', function () {
var id_categoria = this.id;
alert(id_categoria);
});
});
<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>
As you can see here, it works normally, but when I run it on my PC, I get the following error by calling it like this:
Empty string passed to getElementById ().