【问题标题】:jquery delegate not working in kendo ui mobile!?jquery 委托在 kendo ui mobile 中不起作用!?
【发布时间】:2014-05-15 02:26:22
【问题描述】:

我正在尝试在 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 委托,它在桌面浏览器中运行良好,但在移动设备或平板电脑上不起作用。我不确定出了什么问题。桌面浏览器控制台没有错误。但它仍然不适用于移动设备。仅当移除 kendoUI 脚本时,它才能在桌面和移动设备上运行。是与试用版和付费版有关,还是我的代码中有任何错误。请从桌面和移动浏览器查看上面的链接,您会发现问题。

谢谢!!

【问题讨论】:

  • 我有完全相同的问题,让我沮丧了一段时间。如果我发现了什么,会通知你。

标签: jquery mobile kendo-ui


【解决方案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

【讨论】:

    【解决方案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']);
            }
        });
    

    那么不要使用“click”,而是使用“kendoclick”:

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

    我们必须使用自定义点击事件,因为使用点击会导致问题(比如点击提交按钮会调用提交函数两次)

    【讨论】:

    • “Tap”似乎不适用于委托事件(只是让其他人知道)。
    • 是的,它没有。但我确实有点不同。(创建具有特定 id 的动态内容。然后为该 id 添加点击事件,然后从内容中删除 id,此过程在每次生成新内容时重复):)。 (我这样做是因为我以前不知道其他方法:))。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-08-02
    • 1970-01-01
    • 1970-01-01
    • 2013-06-29
    相关资源
    最近更新 更多