jquerymobile 에서 페이지 로딩시 자바스크립트 실행 하기

일반적으로 jquery 를 이용해서 페이지 로딩시 자바스크립트를 처리 하도록 할 경우 
head 부분에 

$(document).ready(function() { 


}); 
이 안에 넣어서 해결 합니다. 

하지만 jquerymobile 는 태생적으로 그렇게 처리 할 수 없습니다. (물론 링크를 jquerymobile 에 의해서 처리 되게 하지 않는다면 가능 하겠지요.) 
왜냐하면 jquerymobile는 첫페이지 이후부터는 모두 ajax 처리를 해버리기 때문에 그 다음 페이지 부터는 페이지 리로드가 이루어 지지 않습니다. 그러니 일반적인 방식으로 할 경우 첫페이지 이후 부터는 실행 되지 않습니다. 

그래서 ajax의 이벤트를 할당해서 처리 하는 방식으로 진행 해야 합니다. 

jquerymobile 구성 방식은 다른 곳을 참조 하시고 

두페이지만 가지고 만들어 보겠습니다. 

첫페이지(page_f.php) 

<div id="page_f" data-role="page"> 
<div data-role="header"> 
<h1>첫페이지</h1> 
</div> 
<div data-role="content"> 
첫페이지 입니다.<br /> 
<a href="page_s.php">두번째 페이지</a> 
</div> 
</div> 

두번째 페이지(page_s.php) 

<div id="page_s" data-role="page"> 
<div data-role="header"> 
<h1>두번째페이지</h1> 
</div> 
<div data-role="content"> 
첫페이지 입니다.<br /> 
<a href="#" >첫째 페이지</a> 
</div> 
</div> 

이런식으로 구성 되어 있다면 

첫페이지(page_f.php)의 head 부분에 
<script src="/js/my.js"></script> 
이런식으로 페이지 하나 연결 하고 

my.js 에는 

$(document).ready(function() { 
  
$("[data-role=page]").live("pageshow",function(event) { 

        //두번째 페이지 아이디를 체크 해서 
          if(this.id == "page_s") { 
              alert("두번째 페이지 입니다."); 

$("[data-role=content] > a").click(function() { 
history.back(); 
}); 

  } 

 }); 
 }); 

이와 같은 식으로 넣으면 됩니다. 

[요약] 
jquerymobile 에서는 $(document).ready 가 첫페이지에서만 실행 된다. 
각각의 페이지에서 실행을 하려면 
각각의 페이지의 data-role="page" 부분에 id를 부여후 그 아이디가 보여졌는지를 체크해서 보여졌을 경우 처리 할 내역들을 처리 하면 된다. 

일단 대충 이런 식이네요. 

jquery mobile가 벌써 알파4네요.. 하나하나 파악 하면서 페이지 만들어 가고 있는데 ... 
어느정도 정리가 되면 저처럼 jquery mobile 초보를 위해 초보입장에서 정리를 해 보겠습니다

출처 : http://www.phpschool.com/link/tipntech/73490

[출처] jquerymobile 에서 페이지 로딩시 자바스크립트 실행 하기|