jquery custom function call not working

Question

I'm new to jquery, ajax and jstree. I'm using jstree to have my <ul> elements look like a tree structure. I have the <ul> under a div tag of id = "container". When I execute the html file, the div (id = "container") is passed to jstree function as follows:

$(function() {
   $('#container').jstree();
});

My html snippet is as follows:

<div id="container">
    <ul id = "treeNodes">
        <li>Parent
            <ul>
                <li>Child1
                    <ul>
                        <li>child2-1</li>
                        <li>child2-2</li>
                        <li>child2-3</li>
                        <li>child2-4</li>
                    </ul>
                </li>                   
            </ul>
        </li>
    </ul>
</div>

The tree structure is being displayed fine.

I'm trying to write a jquery function that gets the li element's name as an argument. For example: when I click Parent , the function should recieve "Parent" as an argument or when I click child2-3 , the function should get "child2-3" as the argument.

I attempted to create that function, but it doesn't seem to work. Here's my attempt -

$("#treeNodes li").click(function() {  
   console.log("hello"); 
   console.log(this.innerHTML);
});

The control seems to go to the function calling the jstree(), but the other function doesn't seem to work. Any help or tips would be appreciated. Thanks in advance.

Answer 1

Making your structure into a JSTree causes new HTML to be created and those new elements have custom classes and new APIs. So, you have to read the documentation to understand how to use the new structure.

If you look at this documentation page , you'll see an example of what you are after, which hinges on a custom changed event. I've reproduced that example, customizing it for your HTML and console output.

 $(function() { $('#container') // listen for the custom "changed" event on any jstree .on('changed.jstree', function (e, data) { // When you click on a JSTree the event appears to fire on the entire tree // You'll have to iterate the tree nodes for the selected one. var i, j, r = []; for(i = 0, j = data.selected.length; i < j; i++) { r.push(data.instance.get_node(data.selected[i]).text); } console.clear(); console.log('Selected: ' + r.join(', ')); }) // create the instance .jstree(); }); 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script> <div id="container"> <ul id = "treeNodes"> <li>Parent <ul> <li>Child1 <ul> <li>child2-1</li> <li>child2-2</li> <li>child2-3</li> <li>child2-4</li> </ul> </li> </ul> </li> </ul> </div> 

Answer 2

I have read the documentation from the jstree page: https://www.jstree.com/

There is a class from the jstree called jstree-children, from that class you can obtain the value from the list, like this:

$(document).on('click', '.jstree-children ul li', function (e) { 
console.log($(this).html());
});

Try this: https://jsfiddle.net/Mantixd/0jwpz2r1/