Question

问题：单击kendo菜单项中的图像，选择事件不会触发。

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

<!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演示中获取的代码示例。在上面的代码我添加了高尔夫的项目。也有我正在谈论的选择功能。执行此后。 如果我点击文本“热门新闻”，警报将会触发。当我点击/选择图片时，提示无效。

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

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

由于开发

Answer 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

Kendo UI菜单项选择问题

1 个答案: