-1

问题：单击剑道菜单项中的图像，选择事件未触发。

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

<!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 论坛发帖仅适用于许可用户。我没有。

让我知道是否有任何机构遇到此类问题。

感谢开发

4

1 回答 1

0

似乎您已将事件声明嵌套在数据源项中。

只需将声明移至菜单级别，它就可以工作。

$("#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

于 2017-02-09T15:02:33.457 回答