jQuery Mobile: `$(document).ready()` 대 `$(document).on('pageinit')` – 어느 것을 사용해야 합니까?

Mary-Kate Olsen

풀어 주다： 2024-12-31 05:03:16

원래의

125명이 탐색했습니다.

jQuery Mobile: `$(document).ready()` vs. `$(document).on('pageinit')` – Which Should I Use?

jQuery Mobile 1.4 업데이트

원본 글은 jQuery Mobile 1.4 이전에 사용되었던 페이지 처리 방식을 대상으로 작성되었습니다. 이 오래된 방식은 이제 더 이상 사용되지 않으며 jQuery Mobile 1.5(포함)까지 활성화됩니다. 즉, 최소한 내년과 jQuery Mobile 1.6까지 아래에 언급된 모든 것을 계속 사용할 수 있습니다.

pageinit를 포함한 이전 이벤트 은 더 이상 존재하지 않으며 pagecontainer 위젯으로 대체되었습니다. Pageinit이 완전히 지워지고 대신 pagecreate를 사용할 수 있으며 이는 변경되지 않습니다.

페이지 이벤트를 처리하는 새로운 방법에 관심이 있다면 pagecreate를 참조하세요. 🎜>이

기사입니다. 그렇지 않은 경우 이 기사를 계속 읽으십시오. 페이지 이벤트 이상의 내용을 다루고 귀중한 정보를 제공할 수 있습니다.

이전 콘텐츠

이 기사는 내 블로그 여기.

$(document).on('pageinit') vs $(document).ready()

jQuery를 처음 배울 때 $(document).ready() 함수 내에서 코드를 호출하여 모든 것이 즉시 실행되도록 배웁니다. DOM이 로드되었습니다. 그러나 jQuery Mobile에서는 탐색할 때 각 페이지의 콘텐츠를 DOM에 로드하는 데 Ajax가 사용됩니다. 이는 첫 번째 페이지가 로드되기 전에 $(document).ready()가 실행된다는 의미입니다. 결과적으로, 페이지 조작을 위한 코드는 페이지 새로 고침 후에 실행되며, 이로 인해 미묘한 버그가 발생할 수 있습니다. 일부 시스템에서는 제대로 작동하는 것처럼 보일 수 있지만 다른 시스템에서는 불규칙하고 반복하기 어려운 동작이 발생할 수 있습니다.

기본 jQuery 구문:

$(document).ready(function() {

});

로그인 후 복사

이 문제를 해결하려면 (실제로 문제가 됩니다.) jQuery Mobile 개발자는 페이지 이벤트를 만들었습니다. 간단히 말해서, 페이지 이벤트는 페이지 실행의 특정 지점에서 트리거되는 이벤트입니다. 그러한 페이지 이벤트 중 하나는 pageinit이며, 다음과 같이 사용할 수 있습니다.

$(document).on('pageinit', function() {

});

로그인 후 복사

문서 선택기 대신 페이지 ID를 사용하면 더 많은 작업을 수행할 수 있습니다. ID가 index인 jQuery Mobile 페이지가 있다고 가정해 보겠습니다.

<div data-role="page">

로그인 후 복사

인덱스 페이지에서만 사용할 수 있는 코드를 실행하려면 다음 구문을 사용할 수 있습니다.

$('#index').on('pageinit', function() {

});

로그인 후 복사

pageinit 이벤트는 페이지가 로드되어 처음으로 표시될 때마다 실행됩니다. 시간. 페이지를 수동으로 새로 고치거나 Ajax 페이지 로딩을 끄지 않으면 다시 트리거되지 않습니다. 페이지를 방문할 때마다 코드가 실행되도록 하려면 pagebeforeshow 이벤트를 사용하는 것이 좋습니다.

다음은 이 문제를 보여주는 실제 예제입니다: http://jsfiddle. net/Gajotres/Q3Usv/

이 질문에 대한 몇 가지 추가 참고사항입니다. 여러 페이지가 포함된 하나의 HTML을 사용하거나 여러 HTML 파일 패러다임을 사용하는 경우 모든 사용자 정의 JavaScript 페이지 처리를 하나의 별도 JavaScript 파일로 분리하는 것이 좋습니다. 이렇게 하면 코드가 더 좋아지지는 않지만 특히 jQuery Mobile 애플리케이션을 생성하는 동안 훨씬 더 나은 코드 개요를 제공할 것입니다.

mobileinit라는 또 다른 특별한 jQuery Mobile 이벤트도 있습니다. jQuery Mobile이 시작되면 문서 객체에서 mobileinit 이벤트가 트리거됩니다. 기본 설정을 무시하려면 mobileinit에 바인딩하세요. mobileinit 사용의 좋은 예 중 하나는 Ajax 페이지 로딩을 끄거나 기본 Ajax 로더 동작을 변경하는 것입니다.