我正在尝试为我 future 的 Kendo UI 移动项目制作演示应用程序。目前，我正在使用 kendo ui mobile 的试用版来测试应用程序，可以在 http://khambuzz.cu.cc/kendoui/test.html 找到该应用程序。 。这是我的代码。
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Mialisto</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="assets/css/kendo/kendo.mobile.all.min.css" />
<!-- the line below is required for access to the appMobi JS library -->
<script type="text/javascript" src="assets/js/lib/jquery.min.js"></script>
<script src="assets/js/lib/console.js"></script>
<script type="text/javascript" src="assets/js/lib/kendo.mobile.min.js"></script>
<style>
li{
cursor: pointer;
}
</style>
</head>
<body>
<!-- basket template -->
<div data-role="view" data-layout="default" id="autobox">
</div>
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">MIALISTO</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
</footer>
</section>
<script>
$(document).ready(function(){
$('#autobox').append('<div class="mini-autobox"></div>');
$('.mini-autobox').append("<ul ><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li><li>hello</li></ul>");
$('ul').kendoMobileListView();
window.g = $('.mini-autobox').delegate('li', 'click', function(){
alert("say hello to everyone!!!");
});
});
</script>
<script>
/* This sample function records an event ID, as well as an optional
set of name/value pairs as a query string to the statMobi Analytics
logs.*/
function addAnalyticsDataPoint(eventID,queryString)
{
try
{
if (queryString==null) { queryString = ""; }
AppMobi.analytics.logPageEvent("/application/" + eventID +
".event", queryString, "", "", 0, "index.html");
}
catch(e) {}
}
/* Drop this javascript function into the <head> element of your
application's index.html page and call it everywhere you want to
record an analytics event. It takes two parameters. The first is an
event identifier string and the second is an optional key/value query
string parameter. */
</script>
<script type="text/javascript">
var app = new kendo.mobile.Application($(document.body),
{
transition:'slide'
});
</script>
</body>
</html>
现在的问题是我在这个测试中使用了jquery delegate，它在桌面浏览器中运行良好，但在移动设备或平板电脑上不起作用。我不确定出了什么问题。桌面浏览器控制台没有错误。但它仍然无法在移动设备上运行。仅当删除 kendoUI 脚本时，它才适用于桌面和移动设备。是否与试用版和付费版有关，或者我的代码是否有任何错误。请从桌面和移动浏览器查看上面的链接，您会发现问题。
谢谢!!
最佳答案
好的，解决了...
因此，在页面加载时，您需要使用 on() 方法将事件附加到所需的元素。在这一点上，我不完全确定为什么需要这样做，可能与 kendoui mobile 如何使用 javascript 和 jquery 运行(调用顺序等)有关。
无论如何，举个例子:
我所做的是将 touchstart mousedown 事件附加到所需的元素(“.eventBtn”)，然后您可以从那里放入所需的 jquery。
$(document).ready(function() {
$('.eventBtn').on('touchstart mousedown', function(){
//desired jQuery for example:
$('desiredElement').slideDown('slow');
});
});
进一步阅读:
jquery api for "on()" method
kendo ui forum post that helped clarify some things for me
关于jquery delegate 无法在 kendo ui mobile 中工作!？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15503059/