Use jQuery to 'click' on a li / ul element

3

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 ().

    
asked by Ivan More Flores 04.07.2017 в 16:25
source

2 answers

2

What happens is that your data is loading dynamically, so that your function that you defined within $(document.ready) is not appended to your a of your list.

You first have to take out the function of that area to be global and then modify it in the following way so that it always works for elements that you load dynamically:

$(document).on('click', '#lista_categoria > li > a', function () {
    //TODO here
});
    
answered by 04.07.2017 / 17:39
source
1

So look ...

$(document).ready(function() {
 $("#lista_categoria > li").on('click', 'a', function () {
       var id_categoria = $(this).attr('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>
    
answered by 04.07.2017 в 16:48