내 jQuery 모바일 스크립트가 첫 페이지에서만 작동하는 이유는 무엇입니까?-JS 튜토리얼-php.cn

내 jQuery 모바일 스크립트가 첫 페이지에서만 작동하는 이유는 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-12 03:34:02

원래의

262명이 탐색했습니다.

Why Do My jQuery Mobile Scripts Only Work on the First Page?

DOM 냄새...

jQuery Mobile에서 가장 자주 묻는 질문 중 하나는 "모든 스크립트를 index.html에 넣어야 하는 이유"입니다. . 일부 답변에는 사실보다 더 많은 노이즈가 포함되어 있음을 알게 될 것입니다. 이 질문은 jQuery Mobile이 어떻게 작동하는지, 스크립트를 포함하는 것을 잊었을 경우 스크립트가 작동하지 않는 이유를 자세히 설명합니다.

jQuery Mobile이 페이지 변경을 처리하는 방법

이것을 이해하려면 상황에 따라 jQuery Mobile이 어떻게 작동하는지 이해해야 합니다. 다른 페이지를 로드하기 위해 ajax를 사용합니다.

첫 번째 페이지는 정상적으로 로드됩니다. HEAD와 BODY는 DOM에 로드되며 다른 콘텐츠를 기다리기 위해 거기에 있습니다. 두 번째 페이지가 로드되면 BODY 콘텐츠만 DOM에 로드됩니다. 더 정확하게 말하면 BODY도 완전히 로드되지 않았습니다. data-role="page" 속성이 있는 첫 번째 div만 로드되고 다른 모든 항목은 삭제됩니다. BODY 안에 더 많은 페이지가 있더라도 첫 번째 페이지만 로드됩니다. 이 규칙은 후속 페이지에만 적용됩니다. 초기 HTML에 더 많은 페이지가 있으면 모든 페이지가 로드됩니다.

이것이 버튼이 성공적으로 표시되지만 클릭 이벤트가 작동하지 않는 이유입니다. 페이지 전환 중에 상위 HEAD가 무시된 동일한 클릭 이벤트.

해결책 1

두 번째 페이지와 다른 모든 페이지에서 SCRIPT 태그를 BODY 콘텐츠에 추가하세요. 이:

<body>
    <div data-role="page">
        // And rest of your HTML content
        <script>
            // Your javascript will go here
        </script>
    </div>
</body>

로그인 후 복사

이것은 빠른 해결책이지만 여전히 보기 흉합니다.

작업 예제는 여기의 다른 답변에서 찾을 수 있습니다:

changepage 후 페이지 표시가 트리거되지 않음

또 다른 작업 예:

jQuery-mobile에서 다르게 로드된 페이지 전환

해결책 2

모든 자바스크립트를 원래의 첫 번째 HTML로 옮깁니다. 모든 것을 모아 단일 js 파일의

HEAD에 넣습니다. jQuery Mobile이 로드된 후 초기화하세요.

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

로그인 후 복사

마지막에 이것이 왜 좋은 솔루션인지 설명하겠습니다.

해결책 3

rel="external" 버튼과 페이지를 변경하는 데 사용하는 모든 요소에 있습니다. 이로 인해 ajax는 페이지 로딩에 사용되지 않으며 jQuery Mobile 앱은 일반 웹 애플리케이션처럼 작동합니다. 불행히도 이것은 귀하의 경우에는 좋은 해결책이 아닙니다. Phonegap은 일반 웹 앱처럼 작동해서는 안 됩니다.

<a href="#second" class="ui-btn-right" rel="external">Next</a>

로그인 후 복사

공식 문서에서

Ajax 없이 연결

현실적인 솔루션

장을 찾아보세요. 현실적인 해결책은

해결책 2를 사용하는 것입니다. 그러나 솔루션 2와 달리 동일한 index.js 파일을 사용하고 가능한 모든 다른 페이지의 HEAD 내부에서 초기화합니다.

이제

왜라고 물어볼 수 있습니다. ?jQuery Mobile과 같은

Phonegap은 버그가 있으며, 모든 js 콘텐츠가 단일 HTML 파일 내에 있으면 조만간 오류가 발생하고 앱이 실패하게 됩니다(로드된 DOM 포함). DOM이 지워질 수 있으며 Phonegap이 현재 페이지를 새로 고칩니다. 해당 페이지에 자바스크립트가 없으면 다시 시작할 때까지 작동하지 않습니다.

위 내용은 내 jQuery 모바일 스크립트가 첫 페이지에서만 작동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!