0

No funciona correctamente el evento click cuando tengo que escuchar a varios selectores, funciona correctamente solo la primera vez, luego no funciona el evento (no logre encontrara información relacionada en Internet).

Tengo un arbol con treeview generado desde la base de datos (arbol de cuentas contables) se genera como un elemento lista (<ul> <li>) y necesito seleccionar uno de estos elementos con el evento click , funciona solo la primera seleccion. esta ventana se abre desde una ventana Modal.

EL codigo que esta en $(document).ready()

$('#treeview ul li').click(function(){
     var datos = $(this).text();
     console.log(datos);
     $('#modal_cuentas_contables').modal("hide");
});

Y este es parte del codigo de la venta modal (La lista):

<div id="treeview" class="treeview">
<ul class="list-group">
    <li class="list-group-item node-treeview" data-nodeid="0" style="color:undefined;background-color:undefined;">
        <span class="icon expand-icon glyphicon glyphicon-minus"></span>
        <span class="icon node-icon"></span>1-ACTIVO
    </li>
    <li class="list-group-item node-treeview" data-nodeid="1" style="color:undefined;background-color:undefined;">
        <span class="indent"></span>
        <span class="icon expand-icon glyphicon glyphicon-minus"></span>
        <span class="icon node-icon"></span>1.1-Activo Corriente - Circulante
    </li>
    <li class="list-group-item node-treeview" data-nodeid="2" style="color:undefined;background-color:undefined;">
        <span class="indent"></span>
        <span class="indent"></span>
        <span class="icon expand-icon glyphicon glyphicon-minus"></span>
        <span class="icon node-icon"></span>1.1.1-Disponible
    </li>

EL codigo compelto de la lista a buscar es:

<div id="treeview" class="treeview">
<ul class="list-group">
    <li class="list-group-item node-treeview" data-nodeid="0" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span>1-ACTIVO</li>
    <li class="list-group-item node-treeview" data-nodeid="1" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>1.1-Activo Corriente - Circulante</li>
    <li class="list-group-item node-treeview" data-nodeid="30" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>1.2-Activo No Corriente - No Circulante</li>
    <li class="list-group-item node-treeview" data-nodeid="46" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span>2-PASIVO CAPITAL Y PATRIMONIO</li>
    <li class="list-group-item node-treeview" data-nodeid="47" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>2.1-Pasivo Corriente</li>
    <li class="list-group-item node-treeview node-selected" data-nodeid="61" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>2.2-Pasivo No Corriente</li>
    <li class="list-group-item node-treeview" data-nodeid="63" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span>2.3-Patrimonio o Capital Contable (Capital)</li>
    <li class="list-group-item node-treeview" data-nodeid="64" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span>3-INGRESOS - GANANCIA</li>
    <li class="list-group-item node-treeview" data-nodeid="65" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>3.1-Ingresos Ordinarios - Ganancias</li>
    <li class="list-group-item node-treeview" data-nodeid="71" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>3.2-Costos de Mercaderia Vendida - Perdidas</li>
    <li class="list-group-item node-treeview" data-nodeid="76" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>3.3-Gastos Operativos - Perdidas</li>
</ul>

El codigo del script es:

<script>
$(document).ready(function() {
    $('#treeview ul li').click(function(){
        console.log('presiono');
        //var datos = $(this).data('nodeid');
        var datos = $(this).text();
        datos = datos.substring(0,datos.indexOf("-"));
        console.log(datos);
    });
});

3
  • podrias poner tu codigo en ejecutable para poder interactuar con el? te espero
    – Enzo
    Commented el 24 abr. 2020 a las 15:35
  • Podrías pasar el elemento completo que contiene el id: "modal_cuentas_contables"? si es lo que necesitas ocultar y no está dificil. Commented el 24 abr. 2020 a las 15:46
  • Muchas gracias por su ayuda, epro el conflicto fue con el metodo de treeview, para solucionar este problema utilice el $('#treeview').on('nodeSelected', function(event, data) { // Your logic goes here }); propietario del mismo metodo y con este pude resolver mi problema. nuevamente gracias !!!
    – Juan
    Commented el 24 abr. 2020 a las 23:57

3 respuestas 3

2

Consejo

Ya no utilices $(document).ready() no sé por que Jquery no ha hecho un deprected del método. En su lugar se utiliza una función anónima.

$( () => {
   // Tu codigo
});

La respuesta de @Marcos es la más óptima, complementando, atrevería a utilizar una clase a los <li> que quedarán en escucha, node-treeview

Entonces tu script quedaría así

$( document ).on('click', '.node-treeview', function() {
     const datos = $(this).text();
     console.log(datos);
     $('#modal_cuentas_contables').modal("hide");
});

Eso fuerza a DOM a ejecutar los eventos bindeados y no por los selectores HTML.

1
  • Gracias, pero no me funciono , sigue sin realizar ni siquiera el primer click.
    – Juan
    Commented el 24 abr. 2020 a las 17:38
1

El problema se debe a que al ejecutar $('#modal_cuentas_contables').modal("hide"), por detras el modal se destruye (se modifica el DOM), provocando que los eventos asingandos se pierdan.

Solución:

Podrías usar delegación de eventos (dicho sea de paso, es mas óptimo), así por ejemplo:

$(document).on('click', '#treeview ul li', function(){
  var datos = $(this).text();
  console.log(datos);
  $('#modal_cuentas_contables').modal("hide");
});

Demo:

$(document).ready(function() {

    $(document).on('click', '#treeview ul li', function(){
        console.log('presiono');
        var datos = $(this).text();
        datos = datos.substring(0,datos.indexOf("-"));
        console.log(datos);
        
        $('#modal_cuentas_contables').modal("hide");
    });
    
    $('#btn').on('click', () => $('#modal_cuentas_contables').modal("show"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<button id="btn" class="btn">Abrir modal</button>

<div class="modal fade" tabindex="-1" role="dialog" id="modal_cuentas_contables">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <div id="treeview" class="treeview">
          <ul class="list-group">
            <li class="list-group-item node-treeview" data-nodeid="0" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span>1-ACTIVO</li>
            <li class="list-group-item node-treeview" data-nodeid="1" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>1.1-Activo Corriente - Circulante</li>
            <li class="list-group-item node-treeview" data-nodeid="30" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>1.2-Activo No Corriente - No Circulante</li>
            <li class="list-group-item node-treeview" data-nodeid="46" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span>2-PASIVO CAPITAL Y PATRIMONIO</li>
            <li class="list-group-item node-treeview" data-nodeid="47" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>2.1-Pasivo Corriente</li>
            <li class="list-group-item node-treeview node-selected" data-nodeid="61" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>2.2-Pasivo No Corriente</li>
            <li class="list-group-item node-treeview" data-nodeid="63" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon"></span>2.3-Patrimonio o Capital Contable (Capital)</li>
            <li class="list-group-item node-treeview" data-nodeid="64" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon"></span>3-INGRESOS - GANANCIA</li>
            <li class="list-group-item node-treeview" data-nodeid="65" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>3.1-Ingresos Ordinarios - Ganancias</li>
            <li class="list-group-item node-treeview" data-nodeid="71" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>3.2-Costos de Mercaderia Vendida - Perdidas</li>
            <li class="list-group-item node-treeview" data-nodeid="76" style="color:undefined;background-color:undefined;"><span class="indent"></span><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>3.3-Gastos Operativos - Perdidas</li>
          </ul>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

4
  • No me funciona, ya que con este método no me ejecuta ni la primera vez (Osea al hacer click no entra la evento).
    – Juan
    Commented el 24 abr. 2020 a las 16:25
  • Comente la linea $('#modal_cuentas_contables').modal("hide") para que no se destruya el modal e igual no deja hacer un segundo click o selección.
    – Juan
    Commented el 24 abr. 2020 a las 17:22
  • @Juan, me deconcierta lo que me comentas. Edite mi respuesta y dejo una demo, para que veas que debería funcionar.
    – Marcos
    Commented el 24 abr. 2020 a las 17:25
  • Muchas gracias por su ayuda, epro el conflicto fue con el metodo de treeview, para solucionar este problema utilice el $('#treeview').on('nodeSelected', function(event, data) { // Your logic goes here }); propietario del mismo metodo y con este pude resolver mi problema. nuevamente gracias !!!
    – Juan
    Commented el 24 abr. 2020 a las 23:57
0

Usando la delegación de eventos para cada uno recorriendo todos los li:

let elementos = $('#treeview ul li');
   $.each(elementos, function() {
       console.log($(this));
       $(this).on("click", function(){
       console.log($(this).text());
       $('#modal_cuentas_contables').modal("hide");
   });
});
1
  • Estimado funciona, pero igual que el otro código no puedo hacer un segundo click (en otro elemento), intente comentando la linea de HIDE del modal, para ver si puedo hace una segunda selección, pero no me deja (solo una primera selección - un click)
    – Juan
    Commented el 24 abr. 2020 a las 17:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.