jquery代表不在kendo ui mobile中工作！？

我正在尝试在我的未来项目中使用Kendo UI mobile做演示应用程序。目前，我正在使用kendo ui mobile的试用版来测试应用程序，它可以在http://khambuzz.cu.cc/kendoui/test.html找到。这是我的代码。jquery代表不在kendo ui mobile中工作！？

  <!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脚本时，它才能在桌面和移动设备上运行。是否与试用版和付费版相关？或者在我的代码中是否有任何错误。请从桌面和移动浏览器的上面链接看看你会看到问题。

谢谢！

来源

2013-03-19 krozero

我有完全相同的问题，一直让我沮丧。会让你知道我是否找到任何东西。 – zillaofthegods 2013-04-04 19:21:44

好了，解决了...

所以在页面加载时，你会想用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

来源

2013-04-04 19:49:06 zillaofthegods

这将允许您委派click事件在剑道UI移动

$(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'：

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

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

来源

2013-04-13 20:17:51 ricka

谢谢！已经用kendo touch“Tap”解决了。 :)。 – krozero 2013-04-16 12:10:50

“点按”似乎不适用于委托事件（只是让其他人知道）。 – ricka 2013-04-16 17:23:35

是的，它没有。但我确实有点不同（创建具有特定ID的动态内容，然后为该ID添加tap事件，然后从内容中删除id，并且每次生成新内容时都会重复此过程）:)。（我这样做是因为我以前不知道另一种方式:)）。 – krozero 2013-04-21 06:29:14

jquery代表不在kendo ui mobile中工作！？

回答

相关问题