JQuery 모바일 v1.2 자바 스크립트 이벤트가 팝업에서 작동하지 않습니다.

Question

저는 JQuery Mobile 1.2 및 php로 웹 앱을 만들고 있습니다. 프로필 페이지에서 로그 아웃을 확인하는 팝업 창이 나타납니다. 내가하고 싶은 것은 ajax 요청을 통해 로그 아웃을 처리하기 위해 click 이벤트로 버튼을 가로 채는 것입니다.

모든 프로젝트 페이지에 custom.js 파일이 포함되어 있습니다. 앱이 계정 페이지에로드됩니다. 로드되고 Ajax 탐색을 통해 작동한다는 것을 알고 있습니다. 내가 custom.js에서이 코드를 포함하면 는 :

$("#perfil").live('pageshow',function(event){ 
    alert('This page was just enhanced by jQuery Mobile!'); 
}); 

을 프로필 페이지가 표시 될 때이 경고를 얻을. 문제는 클릭 기능입니다.

$("#perfil").live('pageshow',function(event){ 
    alert('This page was just enhanced by jQuery Mobile!'); 

    $('#logoutButton').click(function(){ 
     $('#output').html('Logging Out...'); 
     $.get("api/logout",function(data){ 
      if(data.success) { 
       window.location = "index" 
      } 
      else{ 
       $('#output').html('Logout failed. Try again'); 
      } 
      }, "json"); 
    }); 

}); 

동작은 홀수 :

나는이 포함합니다. 기본 페이지에서 프로필 페이지로 이동할 때 알림이 표시됩니다. 그러나 버튼이 반응하지 않습니다. 그러나, 내가 새로 고침 (또는 처음에 프로필 페이지에서 응용 프로그램을로드) 버튼이 올바르게 동작하고 자바 스크립트 로그 아웃 기능을 실행합니다.

JQM에서

<a id="logoutButton" data-role="button" data-icon="check" 
     data-inline="true" data-theme="e">Si, finalizar.</a> 

Answer 1

귀하의 custom.js는 actaully (아래 그에 더)로드, 그리고 점점되지 않은 결과 클릭 이벤트를 바인딩 할 때 버튼이 DOM에없는 경우 이벤트 위임을 사용하여이 문제를 해결할 수 있습니다 (예 :

)

$(document).on('click', '#logoutButton', function(){ 
     $('#output').html('Logging Out...'); 
     $.get("api/logout",function(data){ 
      if(data.success) { 
       window.location = "index" 
      } 
      else{ 
       $('#output').html('Logout failed. Try again'); 
      } 
      }, "json"); 
    }); 

이제 custom.js가로드되지 않는 이유는 기본적으로 jQuery Mobile에서 페이지를로드 할 때 default behavior은 ajax를 통해 data-role="page" div를로드하고 현재 페이지의 DOM에 연결하기 때문입니다. 실현해야 할 중요한 부분은 div 페이지이로드되고 이 아닌 페이지의 다른 모든 리소스 만로드된다는 것입니다.

별도의 페이지에 사용자 지정 스크립트를로드하려면 div래퍼 내에 포함해야합니다.귀하의 링크에 data-ajax="false" 속성 (또는 다른 도메인 인 경우 rel="external")을 사용하여 JQM에 아약스없이 페이지를 완전히로드하도록 지시 할 수도 있습니다.

는 사이드 포인트로서 당신은 .on 대신 depreciated을하고있다 jQuery를 1.7 .live의 같은 .live의 사용을 고려해야합니다.

Answer 2

, 그것은 모든 데이터가 초기화되는 방법에 따라 달라집니다 및 페이지가 어떻게 구성되어 있습니다 : 여기

은 HTML 버튼에 대한 코드입니다.

메인 페이지를로드 할 때 모든 스크립트는 초기화되고 응답 및 느낌처럼 "Ajax"를 위해 캐시됩니다.

기본 페이지 및 프로필 페이지가 여러 페이지 형식 인 경우 스크립트가 한 번 초기화되므로 클릭 버튼이 문제되지 않습니다.

또는 한 페이지에있는 경우 rel = "external"(기본 페이지에서 프로필 페이지로)가 작동합니다. 외부 링크는 JQM이 새로운 HTTP 요청을하도록 강요합니다. 그러나 느슨한 페이지 전환 효과를 수행합니다.

단일 JQM 페이지를 만들고 로그 아웃 버튼을 사용하는 것이 더 좋은 아키텍처라고 생각합니다. 바인딩 기능으로 로그 아웃하십시오. 당신의 클릭 기능을 결합하는 방법

* : 당신의 프로필 페이지에

$('#foo').bind('click', function() { 
    alert('User clicked on "foo."'); 
}); 

Source