Problem when selecting elements within other elements with JQuery

Navigation
0

I have a checklist that is dynamically armed with Jqurey according to a previous selection, so at times I can have 3 checks or 6 according to the profile of the user that I am going to edit.
I try to make the checks fill with the information as I select them, otherwise they bring up to 50000 records and it takes a long time to load the screen.
I do not understand why the JQuery selection does not work for me. I want to get to span with class dynatree-checkbox that is within li that is within ul with class dynatree-container that is within div with id jstree_autorizaciones to assign the event click and execute one function "x".
Here I leave the rendered code so you can understand it better. 

<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>

I can select the div but then I can not make it select the rest. With this I select the div : $('#jstree_autorizaciones) , then I try to add the ul doing $('#jstree_autorizaciones > ul.dynatree-container') but here it does not work anymore and I do not know what I'm doing wrong, I still do not handle much JQuery but from what I understand, it should work this way. Then I would continue with the selection until get to span containing the class dynatree-checkbox , it would be something like this: 

var check = $('#jstree_autorizaciones > ul.dynatree-container > li > span.dynatree-checkbox');
    
asked by Pablo Matias 10.12.2018 в 19:22
source

1 answer

1

It is not clear why you want to select the div nor for what you want to use, but I suggest a way to get what you need without having to add all that route.

The first thing is to add the click method to all the elements that have the class dynatree-checkbox . For this we can use the following: 

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

With this we already have the on click method in all the div of that class. Now to be able to know in which of them I have punctured, I can use $(this) of JQuery .

Finally you would need to add the functionality you want to give the method when you click. Here is an example of how I detect the click and how to get the name of the link depending on what div has clicked: 

$('.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>
    
answered by 11.12.2018 / 14:30
source
avoid anchor tag behavior Large number of requests for two ips to hosting wordpress (Possible attack?)