2

私は剣道UIモバイルで私の将来のプロジェクトのためにデモアプリをやろうとしています。現在、 http：//khambuzz.cu.cc/kendoui/test.htmlにあるテストアプリにkendouimobileの試用版を使用しています。これが私のコードです。

            <!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スクリプトが削除された場合にのみ、デスクトップとモバイルの両方で機能します。それは試用版と有料版に関連するものですか、それとも私のコードに間違いがありますか？問題が発生するデスクトップブラウザとモバイルブラウザの両方から上記のリンクをご覧ください。

ありがとう！！

4

2 に答える 2

1

さて、解決しました...

したがって、ページの読み込み時に、このon()メソッドを使用して、目的の要素にイベントを添付する必要があります。この時点では、なぜこれが必要なのか完全にはわかりません。おそらく、kendouiモバイルがjavascriptとjquery（呼び出しの順序など）でどのように機能するかに関係しています。

とにかく、例として：

私がしたことは、touchstart mousedownイベントを目的の要素（ ".eventBtn"）にアタッチすることでした。そこから、目的のjqueryを配置できます。

$(document).ready(function() { 
   $('.eventBtn').on('touchstart mousedown', function(){
      //desired jQuery for example:
              $('desiredElement').slideDown('slow');
   });
});

さらに読む：
「on（）」メソッドのjquery apikendoui
フォーラムの投稿。

于 2013-04-04T19:49:06.353 に答える
1

これにより、KendoUIMobileで委任されたクリックイベントをバインドできるようになります

$(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']);
        }
    });

次に、「クリック」を使用する代わりに、「ケンドクリック」を使用します。

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

クリックを使用すると問題が発生する可能性があるため、カスタムクリックイベントを使用する必要があります（送信ボタンをクリックすると送信関数が2回呼び出されるなど）

于 2013-04-13T20:17:51.130 に答える