CODEWITHSUNDEEP
jquerymobilekendo-ui
krozero
krozero

Reputation: 6433

jquery delegate not working in kendo ui mobile!?

i'm trying to do demo app for my future project in Kendo UI mobile. currently, i'm using trial version of kendo ui mobile for test app which can be found at http://khambuzz.cu.cc/kendoui/test.html . and here's my code.

            <!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>

now the problem is that i've used jquery delegate in this test which works fine in desktop browsers but it doesn't work on mobile devices or tablets. i'm not sure what's wrong. there's no error in desktop browser console. but still it's not working in mobile devices. it works in both desktop and mobile only if the kendoUI script is removed. is it something related with trial and paid version or is there any mistake in my code. please have a look on above link from both desktop and mobile browser you ll see the problem.

Thanks!!

Upvotes: 2

Views: 1174

Answers (2)

ricka
ricka

Reputation: 1157

This will allow you to bind a delegated click event in 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']);
        }
    });

Then instead of using 'click', use 'kendoclick':

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

We have to use a custom click event because using click can cause problems (like clicking a submit button would call the submit function twice)

Upvotes: 1

jshbrmn
jshbrmn

Reputation: 1787

Okay so solved...

So on page load, you'll want to use the on() method to attach an event to the desired element. At this point I am not entirely sure why this is required, probably something to do with how kendoui mobile functions with javascript and jquery (order of calls, etc).

Anyways, as an example:

What I did was attach the touchstart mousedown event to the desired element (".eventBtn") and from there you can put in your desired jquery.

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

Further reading:
jquery api for "on()" method
kendo ui forum post that helped clarify some things for me

Upvotes: 1

Related Questions