jQuery Mobile 사용 시, <a> 태그 href 속성이 안 될때

고객사로부터 기존의 서비스 중인, 모바일 웹 페이지에서 Swipe 기능을 넣어달라는 요청사항이 있었다.

jQuery Mobile을 이용하여, 'swipeleft, swiperight' 속성값을 사용하여 이벤트를 처리했다.

 

그런데.. 그 전에는 잘되면 <a> 태그 내 href 속성이 먹통이 되는 현상이 발생했다.

클릭하더라도, 크롬 내 console 창에서는 아무런 이슈가 확인되지 않았다.

 

"jquery mobile href not working" 으로 구글링해보니, 이미 과거에 이런 이슈로 문의한 글이 있어서 다른 개발자 분들에게 혹여나 도움이 될까 싶어 남겨본다.

 

해결법은 기존의 <a> 태그 내에 rel = "external" 속성값을 추가해주면 된다.

 

<해결책 1>

<a href="#" rel="external">

 

<해결책 2>

onclick 속성을 별도로 추가하고, 자바스크립 함수를 실행하여 처리

<a href="#" onclick="move('www.naver.com')"/>

function move(url) {
	location.href = url;
}

 

개인적으로는 간편한 <해결책 1>을 추천한다.

 

#참고링크

https://stackoverflow.com/questions/31237812/links-not-working-in-my-jquery-mobile