0

Tengo un checklist que se arma dinámicamente con Jqurey según una selección previa, por lo que por momentos puedo tener 3 checks o 6 según el perfil del usuario que voy a editar.
Intento hacer que los checks se llenen con la información a medida que los selecciono, ya que de lo contrario traen como máximo 50000 registros y tarda bastante en cargar la pantalla.
No entiendo por qué no me funciona la selección JQuery. Quiero llegar al span con la clase dynatree-checkbox que está dentro del li que está dentro del ul con clase dynatree-container que está dentro del div con id jstree_autorizaciones para asignarle el evento click y ejecute una funcion "x".
Acá dejo el código renderizado para que lo puedan entender mejor.

<div class="panel panel-default">
<div class="panel-body" style="height:260px;max-height:260px;overflow-y:auto;overflow-x:auto;">
    <div id="jstree_autorizaciones">
        <ul class="dynatree-container">
            <li class="">
                <span class="dynatree-node dynatree-folder dynatree-exp-c dynatree-ico-cf">
                    <span class="dynatree-connector"></span>
                    <span class="dynatree-checkbox"></span>
                    <span class="dynatree-icon"></span>
                        <a href="#" class="dynatree-title">Auditor</a>
                </span>
            </li>
            <li class="">
                <span class="dynatree-node dynatree-folder dynatree-exp-c dynatree-ico-cf">
                    <span class="dynatree-connector"></span>
                    <span class="dynatree-checkbox"></span>
                    <span class="dynatree-icon"></span>
                    <a href="#" class="dynatree-title">Control de Calidad</a>
                </span>
            </li>
            <li class="">
                <span class="dynatree-node dynatree-folder dynatree-exp-c dynatree-ico-cf">
                <span class="dynatree-connector"></span>
                <span class="dynatree-checkbox"></span>
                <span class="dynatree-icon"></span>
                    <a href="#" class="dynatree-title">Control de Calidad en Bases</a></span>
            </li>
            <li class="">
                <span class="dynatree-node dynatree-folder dynatree-exp-c dynatree-ico-cf">
                <span class="dynatree-connector"></span>
                <span class="dynatree-checkbox"></span>
                <span class="dynatree-icon"></span>
                    <a href="#" class="dynatree-title">Inspector</a></span>
            </li>
            <li class="dynatree-lastsib">
                <span class="dynatree-node dynatree-folder dynatree-lastsib dynatree-exp-cl dynatree-ico-cf">
                <span class="dynatree-connector"></span>
                <span class="dynatree-checkbox"></span>
                <span class="dynatree-icon"></span>
                    <a href="#" class="dynatree-title">Tráfico</a>
                </span>
            </li>
        </ul>
    </div>
</div>

Puedo seleccionar el div pero luego ya no puedo hacer que seleccione el resto. Con esto selecciono el div: $('#jstree_autorizaciones), luego intento agregar el ul haciendo $('#jstree_autorizaciones > ul.dynatree-container') pero acá ya no funciona y no sé que hago mal, todavía no manejo mucho JQuery pero por lo que entiendo debería funcionar de esta manera. Luego seguiría con la selección hasta llegar al span que contiene la clase dynatree-checkbox, sería algo como esto:

var check = $('#jstree_autorizaciones > ul.dynatree-container > li > span.dynatree-checkbox');
4
  • Estimado, cuando se trate de código evita colocar imágenes, lo mejor es colocar el código que generó tu aplicación, de esta forma se puede eventualmente copiar y hacer pruebas.
    – nerdcoder
    Commented el 10 dic. 2018 a las 18:34
  • Disculpas, tenés razón, ahora añado el código.
    – Pabli770
    Commented el 10 dic. 2018 a las 18:38
  • en tu codigo no hay un solo check list, ni tampoco javascript debes publicac tu avanze y de hay en adelante se te puede ayudar
    – Bryro
    Commented el 10 dic. 2018 a las 19:39
  • Debajo del código dejé las selecciones en JQuery que hice, expliqué la que me está funcionando y la que no...
    – Pabli770
    Commented el 10 dic. 2018 a las 19:57

1 respuesta 1

1

No queda claro para que quieres seleccionar el div ni para que lo quieres utilizar, pero te planteo una forma para poder obtener lo que necesitas sin tener que añadir todo ese recorrido.

Lo primero es añadir el método click a todos los elementos que tengan la clase dynatree-checkbox. Para ello podemos usar lo siguiente:

$('.dynatree-checkbox').on('click', function(){ });

Con esto ya tenemos el método on click en todos los div de esa clase. Ahora para poder saber en cuál de ellos he pinchado, puedo usar $(this) de JQuery.

Por último te faltaría añadir la funcionalidad que le quieras dar al método al pinchar. Te dejo un ejemplo de cómo detecto el click y cómo obtener el nombre del link dependiendo de en que div haya pinchado:

$('.dynatree-checkbox').on('click', function(){
  alert('click en checkbox');
  name = $(this).parent().children('.dynatree-title').html()
  console.log(name);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body" style="height:260px;max-height:260px;overflow-y:auto;overflow-x:auto;">
    <div id="jstree_autorizaciones">
        <ul class="dynatree-container">
            <li class="">
                <span class="dynatree-node dynatree-folder dynatree-exp-c dynatree-ico-cf">
                    <span class="dynatree-connector"></span>
                    <span class="dynatree-checkbox"><input type="checkbox"/></span>
                    <span class="dynatree-icon"></span>
                        <a href="#" class="dynatree-title">Auditor</a>
                </span>
            </li>
            <li class="">
                <span class="dynatree-node dynatree-folder dynatree-exp-c dynatree-ico-cf">
                    <span class="dynatree-connector"></span>
                    <span class="dynatree-checkbox"><input type="checkbox"/></span>
                    <span class="dynatree-icon"></span>
                    <a href="#" class="dynatree-title">Control de Calidad</a>
                </span>
            </li>
            <li class="">
                <span class="dynatree-node dynatree-folder dynatree-exp-c dynatree-ico-cf">
                <span class="dynatree-connector"></span>
                <span class="dynatree-checkbox"><input type="checkbox"/></span>
                <span class="dynatree-icon"></span>
                    <a href="#" class="dynatree-title">Control de Calidad en Bases</a></span>
            </li>
            <li class="">
                <span class="dynatree-node dynatree-folder dynatree-exp-c dynatree-ico-cf">
                <span class="dynatree-connector"></span>
                <span class="dynatree-checkbox"><input type="checkbox"/></span>
                <span class="dynatree-icon"></span>
                    <a href="#" class="dynatree-title">Inspector</a></span>
            </li>
            <li class="dynatree-lastsib">
                <span class="dynatree-node dynatree-folder dynatree-lastsib dynatree-exp-cl dynatree-ico-cf">
                <span class="dynatree-connector"></span>
                <span class="dynatree-checkbox"><input type="checkbox"/></span>
                <span class="dynatree-icon"></span>
                    <a href="#" class="dynatree-title">Tráfico</a>
                </span>
            </li>
        </ul>
    </div>
</div>

2
  • Excelente! es lo que buscaba. Lo que sucede es que es un form de usuario que trae miles de registros por lo que tarda bastante en cargarse. Por este motivo quiero hacer que traigan la información sólo los checks que el usuario va seleccionando.
    – Pabli770
    Commented el 11 dic. 2018 a las 13:56
  • Me alegro de haber podido ayudar. Commented el 11 dic. 2018 a las 14:13

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.