비동기식 구현시 jQuery 동작이 되지 않음

나같은 경우는 비동기식으로 페이지를 구현(화면속의 화면이 새로고침되지않고 넘어감)하며 문제가 생겼다.

메인페이지에서 첫번째로 넘어가는 페이지에서 jQuery는 동작하지만 

첫번째 페이지 속에서 두번째 페이지로 넘어가면서 jQuery가 동작하지 않는 문제가 생겼는데 

생각보다 해결방법이 간단했다. 

 

1. 아래와 같은 비동기식 코드로 페이지를 두번 이동.

$(document).ready(function(){
  $('#agree').click(function(){
    $('.showMenu').load('/userJoin');
    return false;
  });
});

 

2. 두번이동한 하위페이지에서 jQuery가 전혀 동작하지않음을 인지.

   ( 현재 jQuery를 확인할수 있는지 없는지 확인하는 코드 )

if (typeof jQuery == 'undefined') {
      alert("없음");
}else{
    alert("있음");
}

 

3. 두번이동한 하위페이지에서 $(function(){}을 기존코드를 감싼다.

상위 페이지에서 이벤트로 자식페이지를 호출할때는

이미 load가 되었기때문에 reload없이 페이지를 보여주는것 같다. 

 

★가장중요

4. 하위 페이지로 이동할때는 반드시 <div>태그를 비워주고 이동한다.

$(document).ready(function(){
  $('#agree').click(function(){

    $('.showMenu').empty();
    $('.showMenu').load('/userJoin');
    return false;
  });
});