kendo ui mobile에서 jquery delegate가 작동하지 않습니다!?

나는 검도 UI 모바일에서 내 미래의 프로젝트를 위해 데모 앱을 만들려고하고있다. 현재, 나는 http://khambuzz.cu.cc/kendoui/test.html에서 찾을 수있는 테스트 응용 프로그램에 대한 검도 UI 모바일의 평가판을 사용하고 있습니다. 여기 내 코드가 있습니다. kendo ui mobile에서 jquery delegate가 작동하지 않습니다!?

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

그래서 해결 좋아 ...

그래서 페이지로드에, 당신이 원하는 요소에 이벤트를 연결합니다 on() 방법을 사용하는 것이 좋습니다. 이 시점에서 나는 이것이 왜 필요한지, 아마도 kendoui 모바일 함수가 자바 스크립트와 jquery (호출 순서 등)와 어떻게 관련이 있는지 잘 모르고있다.

어쨌든, 예를 들어 :

내가 한 일은 원하는 요소 (".eventBtn")에 touchstart mousedown 이벤트를 부착하고 거기에서 당신이 원하는 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

이는 대신 '클릭'사용하는 그런 검도 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

감사합니다 !! 이미 검도로 터치 "탭"터치. :). – krozero

위임 된 이벤트에 대해 "탭"이 작동하지 않는 것 같습니다. – ricka

예, 그렇지 않습니다. 하지만 조금 다릅니다. (특정 ID를 가진 동적 컨텐트를 만든 다음 해당 ID에 대한 탭 이벤트를 추가 한 다음 컨텐트에서 ID를 제거하고이 프로세스를 새 컨텐트를 생성하는 동안 매번 반복합니다.). (나는 전에 다른 방법을 몰랐기 때문에이 방법을 사용했다. :)). – krozero

kendo ui mobile에서 jquery delegate가 작동하지 않습니다!?

답변

관련 문제