Kendo UI 菜单项选择问题答案

【问题标题】：Kendo UI Menu items select issueKendo UI 菜单项选择问题
【发布时间】：2017-02-09 08:20:27
【问题描述】：

问题：点击剑道菜单项中的图片，选择事件没有触发。

我尝试过的：参见下面的示例代码

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/menu/images">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="example">
        <div class="demo-section k-content">
            <h4>Menu with images</h4>
            <ul id="menu-images"></ul>
        </div>
        <script>
            $("#menu-images").kendoMenu({
                dataSource: [
                {
                    text: "Golf", imageUrl: "../content/shared/icons/sports/golf.png",
                    items: [
                    { 
                        text: "Top News", 
                        imageUrl: "../content/shared/icons/16/star.png",
                        select: function (e) {
                            alert('Clicking on image select event is not triggering')
                        }
                    },
                    { text: "Photo Galleries", imageUrl: "../content/shared/icons/16/photo.png" },
                    { text: "Videos Records", imageUrl: "../content/shared/icons/16/video.png" },
                    { text: "Radio Records", imageUrl: "../content/shared/icons/16/speaker.png" }]
                },]
            });
        </script>
        <style>
            #menu-sprites .k-sprite {
                background-image: url("../content/shared/styles/flags.png");
            }
            .brazilFlag {
                background-position: 0 0;
            }
            .indiaFlag {
                background-position: 0 -32px;
            }
            .netherlandsFlag {
                background-position: 0 -64px;
            }
            .historyIcon {
                background-position: 0 -96px;
            }
            .geographyIcon {
                background-position: 0 -128px;
            }
        </style>
    </div>
</body>
</html>

说明：

我已经编辑了这个取自 Telerik 演示的代码示例。在上面的代码中，我添加了 Golf 的项目。这也有我正在谈论的选择功能。执行此操作后。 如果我点击文本“热门新闻”，则会触发警报。当我点击/选择图像时，警报不起作用。

在 Telerik 论坛发帖仅适用于许可用户。我没有。

如果有人遇到此类问题，请告诉我。

谢谢开发

【问题讨论】：

标签： javascript json asp.net-mvc kendo-ui kendo-menu

【解决方案1】：

您似乎已将事件声明嵌套在 dataSource-item 中。

只需将声明移至菜单级即可。

$("#menu-images").kendoMenu({
            select: function(e) {
              alert($(e.item).children('.k-link').text())                
            }
            dataSource: [
            {
                text: "Golf", imageUrl: "../content/shared/icons/sports/golf.png",
                items: [
                { 
                    text: "Top News", 
                    imageUrl: "../content/shared/icons/16/star.png"
                },
                { text: "Photo Galleries", imageUrl: "../content/shared/icons/16/photo.png" },
                { text: "Videos Records", imageUrl: "../content/shared/icons/16/video.png" },
                { text: "Radio Records", imageUrl: "../content/shared/icons/16/speaker.png" }]
            },]
        });

使用$(e.item)，您可以进一步确定已选择的项目。看看在线演示的事件部分。 http://demos.telerik.com/kendo-ui/menu/events

【讨论】：