jquery tree events didn't work

Question

i have initialize jQuery EasyUI's tree and click on nodes it didn't alert to me. here is my html code

<body>
<ul id="tt" class="easyui-tree"
            url="tree_data.json"
            checkbox="true">
</ul>
</body>

and my javascript is here

<head>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script>
$('#tt').tree({
    onClick: function(node){
        alert(node.text);  // alert node text property when clicked
    }
});
</script>
</head>

I saw example and demos on jquery.com that was just like this. Why it's didn't work?

score 1 · Accepted Answer · answered Dec 19 '15 at 17:48

You should put your js in $(document).ready() like following. Hope this will help you.

$(document).ready(function () {
      $('#tt').tree({
           onClick: function (node) {
                alert(node.text);  
           }
      });
});

Full Code

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#tt').tree({
                    data: [{
                        "id": 1,
                        "text": "Folder1",
                        "iconCls": "icon-save",
                        "children": [{
                        "text": "File1",
                        "checked": true
                        }, {
                        "text": "Books",
                        "state": "open",
                        "attributes": {
                            "url": "/demo/book/abc",
                            "price": 100
                        },
                        "children": [{
                            "text": "PhotoShop",
                            "checked": true
                        }, {
                            "id": 8,
                            "text": "Sub Bookds",
                            "state": "closed"
                        }]
                    }]
                    }, {
                        "text": "Languages",
                        "state": "closed",
                        "children": [{
                        "text": "Java"
                    }, {
                        "text": "C#"
                    }]
                }],

                onClick: function (node) {
                    alert(node.text);
                }
                });
            });
        </script>
    </head>

    <body>
        <ul id="tt" class="easyui-tree" checkbox="true"></ul>
    </body>
</html>

jquery tree events didn't work

1 Answers1