아이폰에서 fastclick으로 부트 스트랩 3 라디오 버튼이 작동하지 않습니다.

Question

fastclick을 내 부트 스트랩 3 반응 형 웹 사이트와 함께 사용하여 모바일 장치에서 반응 시간을 단축했습니다. 일반적으로 문제없이 잘 작동합니다. 그러나 많은 테스트를 거친 끝에 아이폰의 부트 스트랩 라디오 버튼이 깨지는 것을 발견했습니다.

처음에는 버튼이 작동하지만 선택한 옵션을 변경하면 양식을 제출할 때 처음 선택한 옵션 만 전달됩니다. fastclick을 제거하면이 동작이 중지됩니다. 이상 내 최소한의 테스트 페이지에서 fastclick을 추가하면 문제가 발생합니다. 이것은 사파리와 아이폰의 크롬에서 발생합니다.

jquery-mobile을 추가하고 라디오 버튼의 마크 업을 조정하면 응답 시간이 향상된다는 기사를 발견했습니다. 그러나 나는 jquery-ui 슬라이더를 사이트에서 사용하고 jquery 모바일 충돌을 추가했습니다. 내 목표는 라디오 버튼에서 fastclick을 비활성화 ('needsclicks'클래스를 통해)하고 jqmobile이 처리하도록하는 것이 었습니다.

사이트의 슬라이더를 맞춤 설정하고 휴대 기기에서 작동하고 멋지게 보이게하는 데 많은 도움이되었습니다. jqmobile에 추가하면 도움이 될 것이라는 희망으로 전체 사이트를 다시 작성하고 싶지 않습니다. 우리도 시간이 없다.

어떻게 해결할 수 있습니까? 부트 스트랩 라디오 버튼으로 fastclick 사용에 관한 다른 데이터를 찾을 수 없다는 것에 놀랐습니다. 물론 라디오 버튼에서 패스트 클릭을 비활성화 할 수는 있지만 사용하기가 끔찍한데이 응용 프로그램에서는 허용되지 않습니다.

아이폰에서 작동하도록 이러한 라디오 버튼을 수동으로 수정할 수있는 방법이 있습니다. Android에서는 문제가되지 않습니다. 찾지 못한 수정 사항이 있습니까?

Answer 1

심각한 두뇌 굴곡 작업을 한 후에 나는 라디오가 이미 선택된 후에 만 ​​문제가 발생한다는 것을 발견했습니다. 이것은 처음에 라디오 버튼 IE가 미리 선택된 값으로 폼을 다시 보여 주도록 설정함으로써 이루어졌습니다. 그리고 초기 값이 선택되고 옵션이 변경되면 (다른 옵션이 선택됨). 이로 인해 실제로 라디오 버튼의 값을 설정하는 프로세스가 fastclick과 충돌하는 것으로 생각됩니다.

내가 주목 한 것은 옵션을 선택하지 않으면 완벽하게 작동한다는 것입니다. 그래서 아이폰으로 테스트해야하고 각 라벨의 터치 이벤트에 다음 코드를 추가해야한다. 기본적으로 이것은 터치 될 때마다 라디오 버튼을 완전히 지 웁니다. 그런 다음 라디오 버튼을 한 번 클릭 할 때마다 처음 선택한 것과 같이 작동합니다.

$("#radio_button_label_id").bind("touchend", function(e){    
        resetRadio_radioid(); 

}) 

function resetRadio_radioid(){ 
      var ids = array('radio_option_1_id', 'radio_option_2_id', 'radio_option_3_id'); 
      for(i=0; i<ids.length;i++){ 
       //clear all checked data 
       $('#'+ids[i]).prop('checked', false); 
       $('#'+ids[i]).removeAttr('checked'); 
      } 
      return true; 
     } 

이렇게 완전히 문제가 해결되었습니다. 도움이 되길 바랍니다.

Answer 2

ipad에서도이 문제를 재현했습니다.

문제점 : Fastclick은 두 번의 클릭 이벤트 (레이블 및 입력 : 라디오의 경우 하나)를 트리거합니다.

해결 방법 : 입력시 'needsclick'클래스를 사용하십시오 : 라디오 필드. 더 많은 정보 : https://github.com/ftlabs/fastclick#use-case-2-twitter-bootstrap-222-dropdowns