[ Hybrid App ] Page별 Html 파일 분할 시, Javascript 이벤트 처리

MultiPagewithJs.zip

다중 Page를 한 html파일에 한 Javascript로 해놓은 샘플은 많이 보았습니다.

하지만!!! 전 코딩을 분할 시켜서 보는게 이해하기도 편하고 수정도 편해서,

예전 안드로이드 할 때도 클래스를 자주 분할 시켜 둡니다.

HTML5를 분할 시키고, 그냥 id 값만 불러와 event 처리를 하니,

아무 현상도 일어나지 않아 고민을 많이 했습니다.

html: ( 따로 분할된 HTML)

<a id="btnId" href="#" data-prefetch="true" data-role="button">테스트</a>

javaScript: ( 따로 분할된 Javascript)

$("#btnId").bind('tap',function(event, ui){

         alert("탭 이벤트 발생");

});

main.html (처음 불러지는) 페이지의 이벤트는 잘 처리 되지만,

Page를 이동 시키면 이벤트 발생이 되지가 않습니다.

위 같이 href로 이동하거나  mobile에서는 $.mobile.changePage("#","slide"); 같이 말이죠.

이런 상황에선 다음과 같이 작성 하시면 됩니다.

$(document).delegate('#page의 ID', 'pageinit', function () {

    $("#btnId").bind('tap',function(event, ui){

    alert("page1 -> main");

    });

});

페이지를 직접 찾아가서 컴포넌트를 확인하기 때문에, 인식이 가능한 것입니다.

위 내용과 관련된 샘플을 첨부해두었습니다.

main.html,page1.html,page2.html이 있고

 각각 main.js,page1.js,page2.js 가 있어 main.html에서 모두 호출합니다.

페이지 이동때 마다 javscript로 탭이벤트를 발생하는 샘플입니다.

참고하세요.

그럼 오늘도 즐코딩^^