2012-08-31 4 views
3

브라우저에서 실행하도록 이식하라는 요청을받은 자동차 대시 (Dash) 디스플레이 장치 용 HTML5/JavaScript 앱이 있습니다.모바일 Safari, jQuery 및 향후 DOM 요소에 대한 바인딩

쉬운 작업은 몇 가지 간단한 변경을하고 지금은 모든 것이 내가 재판을 모든 데스크톱 브라우저에서 잘 작동합니다.

그런 다음, 문제를했다. 데모 용으로 iPad에서 실행할 수 있는지 구체적으로 확인하도록 요청 받았습니다.

문제 : 사용자가 다른 탐색 할로

응용 프로그램은 필요한 페이지 단편에로드 jQuery.load를 사용하여, 하나의 페이지 내비게이션을 사용의 화면. ' 그러나 모든 jQuery 바인딩은 한 곳에서 중앙 집중화되므로 바인딩하는 요소가 아직 DOM에 존재하지 않을지라도 앱 시작시 수행됩니다.

향후 DOM 요소에 바인딩 할 수 있으므로 jQuery.live 또는 .on을 사용하면 문제가 없습니다. 적어도 데스크톱 브라우저에서는.

모바일 Safari에서 .live/.on은 아직 존재하지 않는 요소에 바인딩하기 만하면 작동하지 않습니다. '작동합니다'의 모든 링크가 데스크톱 브라우저에서 작동 않는 http://dhines.com/jquery-test/

공지 사항,하지만 모바일 사파리 :

여기이 문제를 설명하기 위해 예를 가지고!

웹을 둘러 보았을 때 내가 찾은 유일한 해결책은 클릭 가능한 모든 요소에 onclick = "function() {}"을 추가하는 것입니다. 이것은 바보 같다.

내가보기에 다른 옵션은 내 바인딩을 분산시키고 적용 할 특정 조각에 대해 수행하는 것이지만 조각과 바인딩의 톤을 감안할 때 이것은 재미 있지 않을 것입니다.

내 예를 살펴보면 누구나 저에게 더 나은 해결책을 제공 할 수 있습니까? 또는 .load를 잘못 사용했는지 여부를 지적하십시오.

+0

도움이 될지 모르겠지만 [jQuery 모바일] (http://jquerymobile.com/)을 사용해 보셨습니까? – feeela

답변

1

나는 (내가 어떤 애플 제품이 없음)이 테스트 할 수 있지만, 나는 JQuery와 티켓 시스템에 대한 논의 발견 :

http://bugs.jquery.com/ticket/5677#comment:7 트릭이 추가 될 것으로 보인다

{커서 : 포인터를 } 요소에이 예제에서는이 CSS 속성을 정의하지 않는다는 것을 알았다. 이것을 시도해보십시오 ...

어쩌면 Apple 사파리 개발자는 curosr : pointer가없는 요소에 대해 click 이벤트가 발생하지 않는다고 생각할 수 있습니다.

+0

이상하게도 내 예제가 수정되었지만 내 앱은 수정되지 않았습니다. 이유는 확실하지 않습니다 ... – Danny

+0

솔루션은 iframe 내부에서 실행되는 응용 프로그램을 가지고 있었고 상위 문서 css set "iframe {cursor : pointer;} – Danny

관련 문제