jquery树事件没有用

时间:2015-12-19 14:21:50

标签: javascript jquery jquery-easyui

我初始化了jQuery EasyUI的树,然后点击它没有警告我的节点。 这是我的HTML代码

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

我的javascript在这里

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

我在jquery.com上看到了像这样的示例和演示。为什么它没有用?

1 个答案:

答案 0 :(得分:1)

您应该将js放在$(document).ready()中,如下所示。希望这会对你有所帮助。

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

完整代码

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