带有子项的 JQuery 对象导致未定义填充剑道菜单答案

【问题标题】：JQuery object with children causes undefined with populating Kendo menu带有子项的 JQuery 对象导致未定义填充剑道菜单
【发布时间】：2014-06-09 10:21:05
【问题描述】：

当我从 JQuery 数据源对象加载剑道菜单时，当我将鼠标悬停在带有子项的菜单项上以弹出下拉菜单时，我得到“未定义不是函数”。

首先让我说顶层的工作原理与此 stackoverflow 问题中的回答相同： how to load the kendoMenu dynamically using dataSource or json

我正在学习 jQuery 和 Kendo，只是看不到缺少什么...

我确信我可以使用 jQuery 遍历我的模型对象并通过“手动”加载菜单，但我认为这不是一个好的做法，而且很难维护。

我的 javascript 是这样的（在我悬停之前它在顶层工作）：

 $.get("/Home/getmenus", function (data) {
            $("#hmenu").kendoMenu({ dataSource: data })
            console.log(data);
        });

从我的 API 返回的对象如下所示：

[{"id":13,"text":"File","url":"File URL","items":[{"id":5,"text":"Create New Ticket","url":"xx"},{"id":6,"text":"Create New Project","url":"222"}]},{"id":16,"text":"Edit","url":"Edit URL","items":[]}]

再说一次，我是新人，正在学习，只是需要一些指导。

【问题讨论】：

标签： jquery menu kendo-ui children

【解决方案1】：

经过几个令人沮丧的小时后，我找到了解决方案，要么是其中一个 kendo js 库中存在错误，要么我只是使用了错误的库。

当我使用这个库时：

<script src="~/Scripts/kendo/2014.1.318/kendo.menu.min.js"></script>

我收到上述错误。即使我使用简单的 html ul/li/ul/li 类型的菜单，其中我的查询中唯一的 javascript 是

$(document).ready(function () {
$("#menu").kendoMenu();
});

一旦我切换到使用：

<script src="~/Scripts/kendo/2014.1.318/kendo.web.min.js"></script>

这开始如您所愿。

这就是我构建分层菜单的方式，其中菜单项通过我的 api 从 SQL 中获取：（效果很好，到目前为止没有明显的额外性能影响 e

<link href="~/Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.1.318/kendo.flat.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/kendo/2014.1.318/kendo.core.min.js"></script>
<script src="~/Scripts/kendo/2014.1.318/kendo.data.min.js"></script>
<script src="~/Scripts/kendo/2014.1.318/kendo.web.min.js"></script>
<ul id="hmenu"></ul>
<script>
    $(document).ready(function () {
        $.get("/Home/getmenus", function (data) {
             hmenuelement = $("#hmenu");
            $.each(data, function (index, value)
            {
                hmenuelement.append("<li id='" + value.text + "'>" + value.text + "</li>")
                if (value.items.length > 0)
                {
                    var parentItem = $("#" + value.text);
                    parentItem.append("<ul id='" + value.text + index + "'></ul>");
                    childNode = $("#" + value.text + index);
                    $.each(value.items, function(index,value)
                    {
                        console.log(value);
                        childNode.append("<li>" + value.text + "</li>")
                    })
                }

            });
            (hmenuelement).kendoMenu();
        });
    });
</script>

【讨论】：