Question

我正在尝试为我未来的Kendo UI移动项目做演示应用。目前，我正在使用试用版的kendo ui mobile for test app，可在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委托，它在桌面浏览器中运行良好，但它不能在移动设备或平板电脑上运行。我不确定是什么问题。桌面浏览器控制台没有错误。但它仍然无法在移动设备上运行。仅当删除了kendoUI脚本时，它才能在桌面和移动设备上运行。它是与试用版和付费版相关的东西，还是我的代码中有任何错误。请查看桌面和移动浏览器的上述链接，你会看到问题。

谢谢！

Answer 1

好的，所以解决了......

因此，在页面加载时，您需要使用on()方法将事件附加到所需元素。在这一点上，我不完全确定为什么这是必需的，可能与kendoui移动如何使用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

Answer 2

这将允许您在Kendo UI Mobile中绑定委派的单击事件

$(document)
    .on('touchstart', function(e){
        var touches = e.originalEvent.changedTouches;        //touches and changedTouches seem to be the same for touchstart
        var element = $(e.target);

        //if there's only one touch
        if(touches.length == 1){
            element.data({
                _clicking: true,
                _touch: {
                    pageX: touches[0].pageX,
                    pageY: touches[0].pageY
                }
            });
        }else{
            element.removeData(['_clicking', '_touch']);
        }
    })
    .on('touchend', function(e){
        var element = $(e.target);

        if(element.data('_clicking')){
            var touches = e.originalEvent.changedTouches;        //only changedTouches exist for touchend
            var start_touch = element.data('_touch');

            //if there's only one touch and it has not moved
            if(touches.length == 1 && (start_touch.pageX == touches[0].pageX && start_touch.pageY == touches[0].pageY)){
                element.trigger('kendoclick');
            }

            element.removeData(['_clicking', '_touch']);
        }
    });

然后使用'kendoclick'：

而不是使用'click'

$(document).on('kendoclick', 'div', function(){
    console.log('clicked');
});

我们必须使用自定义点击事件，因为使用点击可能会导致问题（例如点击提交按钮会调用提交功能两次）

jquery代表没有在kendo ui mobile工作！？

2 个答案: