jQuery에서 'touchstart'이벤트가 안드로이드 폰 갭 및 백본과 함께 작동하지 않습니다.

Question

다음 템플릿을 백본에 포함 시키면 모두 완벽하게 렌더링됩니다. 작동

<a href="#" data-role="button" id="button1" class="suggested-unselected"></a> 
    <script type="text/javascript"> 
      document.getElementById('button1').addEventListener('touchstart', select, false); 

     function select(){ 
      alert('test'); 
     } 
     function unselect(){ 
      alert('unselect'); 
     } 
    </script> 

: 나는 다음과 같은 작성하는 경우

<a href="#list" data-role="button" id="button" class="all-unselected"></a> 
    <a href="#" data-role="button" id="button" class="suggested-unselected"></a> 
    <a href="#" data-role="button" id="button" class="friends-unselected"></a> 
    <a href="#" data-role="button" id="button" class="private-unselected"></a> 
    <a href="#" data-role="button" id="button" class="buzz-unselected"></a> 
    <script type="text/javascript"> 
     var buttons = $("a#button"); 

     for(var i=0; i<buttons.length; i++){ 
      $(buttons[i]).bind('touchstart', select, false); 
      $(buttons[i]).bind('touchend', unselect, false); 
     } 

     function select(){ 
      alert('test'); 
     } 
     function unselect(){ 
      alert('unselect'); 
     } 
    </script> 

touchstart 그러나 트리거되지 않습니다. 마치 jQuery가 이벤트를 바인딩 할 수없는 것처럼 말입니다. 무엇이 문제일까요?

Answer 1

코드에 몇 가지 문제점이 있습니다. 모든

우선 :

var buttons = $("a#button"); 

이것은 ID button와 앵커 요소를 선택한다. ID는 고유해야하므로 하나의 요소 만 반환해야합니다. 그러나 반환 된 값을 반복하려고합니다. 그것은 당신이 그것을하려는 방식으로 작동해서는 안됩니다.

둘째 :

당신은 당신이 일반적으로이를 반복하는 .each()를 사용하여 선택의 jQuery 객체의 집합이있는 경우. 그러나 이벤트 핸들러를 오브젝트 세트에 바인드하려는 경우 jQuery가 이벤트를 선택 항목에 바인드 할 수 있으므로 루프에서이를 수행 할 필요조차 없습니다.

셋째 :

.bind() -ing 다른 작동, 당신은 .bind()을 믹싱 - 구문을 addEventListener 구문. 내가 전에 코드를 시도했다

$('#button1').bind('touchstart', select); 
$('#button1').bind('touchend', unselect); 

function select(){ 
alert('test'); 
} 

function unselect(){ 
alert('unselect'); 
}