jQuery mobile $문서.즉시 동등한
ajax 네비게이션 페이지에서 초기화 자바스크립트를 수행하는 고전적인 "초기화 준비 완료" 양식은 단순히 실행되지 않습니다.
ajax가 로드된 페이지에서 코드를 실행하는 올바른 방법은 무엇입니까?
(내 말은, 내 아약스가 아니라...jquery mobile page navigation system이 저를 그 페이지로 이끌었습니다.)
그래요, 저는 그런 것이 의심스러웠는데...정말 고마워요 =) 하지만..아직도 작동이 안 돼요, 여기 제 코드가 있어요
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mypage</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.min.css" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.min.js"></script>
<script type="text/javascript">
$('div').live('pageshow',function(event, ui){
alert('ciao');
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Shopping Cart</h1>
</div>
<div data-role="content"> asd
</div>
</div>
</body>
나는 분할을 지정해야 합니까?
현재 JQM 문서가 매우 상세하지 않기 때문에 동일한 내용을 조사하는 데 시간을 할애했습니다.아래의 솔루션은 저에게 적합합니다.
<script type="text/javascript">
$('div:jqmData(role="page")').live('pagebeforeshow',function(){
// code to execute on each page change
});
</script>
위의 코드는 페이지 변경 시마다 실행되므로 다중 초기화를 방지하기 위해 자신의 체크 플로우를 구현해야 합니다.
"pageinit" 이벤트에 바인딩합니다.JQM 문서: http://api.jquerymobile.com/pageinit/
이와 동등한 최상의 값$(document).ready()가$(document).bind('pageinit')
jQuery Mobile 설명서를 보십시오. http://jquerymobile.com/demos/1.1.1/docs/api/events.html
중요:$(문서)가 아니라 $(문서).bind('pageinit')를 사용합니다.준비된
jQuery에서 가장 먼저 배우는 것은 $(문서) 안에서 코드를 호출하는 것입니다.ready() 기능은 DOM이 로드되는 즉시 모든 것이 실행되도록 합니다.그러나 jQuery Mobile에서 Ajax는 탐색할 때 각 페이지의 내용을 DOM에 로드하는 데 사용되며, DOM 준비 처리기는 첫 페이지에 대해서만 실행됩니다.새 페이지가 로드되고 작성될 때마다 코드를 실행하려면 페이지 init 이벤트에 바인딩할 수 있습니다.이 이벤트는 이 페이지 하단에 자세히 설명되어 있습니다.
특정 페이지에서 코드를 실행하려면 다음 패턴을 사용할 수 있습니다.
$('div:jqmData(url="thepageyouwanted.html")').live('pageshow',function(){
// code to execute on that page
//$(this) works as expected - refers the page
});
사용할 수 있는 이벤트:
pagebeforeshow전환 직전에 시작합니다.pageshow전환 후 바로 시작pagecreate페이지를 처음 로드할 때만 시작합니다.
이벤트가 표시될 때마다 모든 페이지쇼 및 표시 전 페이지가 호출됩니다.처음에 발생하는 일을 원한다면 다음과 같은 작업을 수행할 수 있습니다.
$('#pageelementid').live("pagecreate", pageInitializationHandler);
그리고 나중에 당신의 코드에서:
function pageInitializationHandler(event) {
//possibly optional based on what exactly you're doing,
//but keep it in mind in case you need it.
//Also, this seems to need to be an exact duplicate of the
//way you used it with the .live() method or jQ/jQM won't unbind
//the right thing
$('#pageelementid').die("pagecreate", pageInitializationHandler);
//Do your actual initialization stuff
}
여러 개의 JQM "페이지"가 포함된 html 파일을 수행할 때 특히 도움이 된다는 것을 알았습니다.전체 shebang에 대한 실제 초기화 코드가 (파일의) 메인 페이지에 있도록 설정한 다음 다른 모든 서브 페이지에는 초기화 코드가 발화되었는지 확인하는 페이지 생성 핸들러가 있고 그렇지 않은 경우 $.mobile.changePage("#메인 페이지")가 있습니다.꽤 잘 작동합니다.
말씀하신 것처럼 pageinit 이벤트가 작동합니다.그러나 다중 물리 페이지 상황(예: index.html에서 mypage.html로 탐색)의 경우 실행되는 기능은 상위에 있습니다.
페이지 초기화에 있는 모든 논리는 로드되는 링크가 아니라 상위와 관련된 것이어야 합니다.탐색은 JQM의 ajax 콜백을 통해 처리되며 하위 페이지의 항목이 범위를 벗어날 수 있으므로 탐색 중인 페이지에서 함수를 호출할 수 없습니다.
이 경우 data-slot="slot" 특성을 사용할 수 있습니다.
<a href="mypage.html" data-ajax="false">My Page</a>
이렇게 하면 ajax 탐색이 제거되고 전체 페이지를 다시 로드하면 $(문서)가 실행됩니다.불러오는 페이지에 ready 기능이 있습니다.
비교적 간단합니다.당신의 문제를 이해할 것 같습니다, 그 행사를 반복하지 말고 한 번만 발사하고 싶으신가요?만약 그렇다면 이렇게 하세요.
$(document).one('pageinit', function(){ // write your code here })
이 경우 '페이지인it'이 한 번 발생합니다.만약 당신이 더 많은 것을 알고 싶은 것은.one()jQuery method, 여기서 확인하세요.
언급URL : https://stackoverflow.com/questions/5622581/jquery-mobile-document-ready-equivalent
'programing' 카테고리의 다른 글
| Excel에서 동일한 행에 중복을 정렬하는 방법 (0) | 2023.09.18 |
|---|---|
| 페이지 로드가 완료되었는지 여부 감지 (0) | 2023.09.18 |
| R 일 년으로 여러 열을 퍼 나르고 있음 (0) | 2023.09.18 |
| naN 플로트를 c에서 생성하는 방법은? (0) | 2023.09.18 |
| MySQL 각각 여러 행으로 여러 테이블 결합 (0) | 2023.09.13 |