제이쿼리 모바일 - 클릭 이벤트가 동작하지 않아요!
"처음 들어가면 event가 실행 안 하는데 새로고침하면 동작해요."
하는 분들은 이 글을 보셔야 합니다. 저도 그랬거든요..
모바일 버전의 메인만 jQuery Mobile을 이용했다.
물론 내가 만든 건 아니고 만들어져 있는데 자꾸 삐그덕대서 손을 봤다.
표면적인 문제는 사이드 메뉴를 여는 버튼의 click event가 작동하지 않는 문제였는데
근본적인 원인은 jQuery Mobile을 써서 특수한 상황이 만들어졌기 때문이었다..
그래서 일단 구글링을 하는데 jQuery Mobile click event 까지만 쳐도
not working이 뜨는 것을 보니.. 나같은 사람이 많구나 했다.
역시나 스택오버플로우에 질문이 많이 올라와있었다.
휴...... 거기서 알아낸 점은
jQuery Mobile을 사용하면 기존의 event가 동작하지 않을 수 있다는 점. (특히 click event)
공식 홈페이지에도 있는 이 구문에 나는 사로잡혔고
그냥 click event를 사용하면 안 되겠구나! 했다 -ㅅ-..
스택오버플로우에 있던 친절한 해결법으로는
1. <div data-role="page"></div> 안에 동작하길 원하는 <script> 직접 넣기 (비추)
2. <head> 안에 동작하길 원하는 script를 한 데 모은 js파일을 호출하기
3. ajax가 동작하지 않았으면 하는 곳에 rel="external" 또는 data-ajax="false" 넣어주기
- ex )<div data-ajax="false">
결론은 나는 다 해봤지만 소용이 없었고..
스택오버플로우에서 찾은 해답 중 하나였던 코드 조금 손보기로
일단 사이드 메뉴가 열리게 만들었다.
수정 전
$("#open-btn").click( function() {
수정 후
$(document).on("click", "#open-btn", function() {
하지만.. 이대로 끝나는가 했더니
PC에서도 안드로이드에서도 잘 되는데
아이폰 사파리에서 온전히 동작하지 않는 것을 확인했다.
아아.. 제발 사파리ㅠㅠ 이거 원......
그래서 ajax를 꺼보기로 하고
<head>에
<script src="jQuery"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.ajaxLinksEnabled = false;
$.mobile.ajaxFormsEnabled = false;
$.mobile.ajaxEnabled = false;
});
</script>
<script src="jQuery Mobile"></script>
이런 식으로 jQuery를 호출한 후
jQuery Mobile 호출 전에 저 스크립트를 넣어서 ajax를 껐는데..
그러면 모바일 버전에 jQuery Mobile을 쓰게된 의미가 없어져서 실패!!ㅠㅠ
(물론 이렇게 넣으면 여러분 원하는대로 동작할 것입니다.
굳이 ajax 이용하지 않겠다 하면 이 방법이 심신에 좋음.)
그래서 다시 천천히 코드를 뜯어보는데
큰 문제점이 있었다.
jQuery Mobile로 만들어진 특수성이 문제였는데.
사이드 메뉴를 두 번, 세 번, 네 번도 불러온다는 것.
id는 페이지에서 하나로 유일해야하는데
특수성으로 인해 2개도 되고 3개도 되고 4개도 됐던 것이었다.
휴........ 그래서 원치 않았지만 id를 class로 바꾸고 css도 바꾸고 js도 바꾼 끝에
아이폰, 안드로이드 모두 잘 동작하게 됐다. 짝짝짝
최종 코드
$(".open-btn").click( function() {
/* event */
});
ㅎㅎ.. 이렇게 초간단하게 할 거였으면서..
중간에 click 옆에 touchstart 넣은 것 때문에 뻘짓한 것도 포함하면..
아 그간의 뻘짓은.. 모두 이걸 위한 것이었구나..
실무에서는 이런 상황이 발생하지 않는다는 보장이 없으므로
id로 핸들링하지말고 안전하게 class로 하자..!!
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery UI drag and drop(드래그 앤 드롭) (0) | 2017.05.02 |
|---|