剑道 UI 菜单项选择问题
[英]Kendo UI Menu items select issue
问题描述
Issue: Clicking on the image in the kendo menu item, the select event is not triggering.
问题：单击剑道菜单项中的图像，未触发选择事件。
what i have tried: See the sample code below我尝试过的：请参阅下面的示例代码
<!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>
Description:描述：
I have edited this code sample taken from Telerik demo.我已经编辑了来自 Telerik 演示的代码示例。 in the above code i have added the items for Golf.在上面的代码中，我添加了高尔夫项目。 that also have the select function which is what i am talking about.也有我正在谈论的选择功能。 after executing this.执行此操作后。 If i click on the text "Top News" the alert will trigger.The alert is not working when i click/select on the image.如果我单击文本“热门新闻”，警报将触发。当我单击/选择图像时，警报不起作用。
Posting in Telerik forum is only applicable for licensed users.在 Telerik 论坛上发帖仅适用于许可用户。 I dont have.我没有。
Let me know if any body come across these kind of issue.如果有任何机构遇到此类问题，请告诉我。
Thanks Dev感谢开发
1 个解决方案
解决方案1
0 2017-02-09 15:02:33
It seems like you have nested the event-declaration within the dataSource-item.您似乎在数据源项中嵌套了事件声明。
Just move the declaration to the menu-level and it should work.只需将声明移动到菜单级别，它应该可以工作。
$("#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" }]
},]
});
Using $(e.item) you can go further and figure out which item has been selected.使用$(e.item)您可以进一步找出已选择的项目。 Have a look the event-section of the online-demo.看看在线演示的事件部分。 http://demos.telerik.com/kendo-ui/menu/events http://demos.telerik.com/kendo-ui/menu/events
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.