Giới thiệu
Bài viết này cũng có thể được tìm thấy HERE như một phần của blog của tôi.
Làm thế nào jQuery Mobile xử lý trang thay đổi
Để hiểu tình trạng này bạn cần phải hiểu như thế nào jQuery Mobile hoạt động. Nó sử dụng ajax để tải các trang khác.
Trang đầu tiên được tải bình thường. Nó HEAD và BODY được nạp vào DOM, và họ đang có để chờ đợi những nội dung khác.Khi trang thứ hai được tải, chỉ nội dung BODY của bạn được tải vào DOM. Để chính xác hơn, ngay cả BODY chưa được tải đầy đủ. Chỉ div đầu tiên có thuộc tính data-role = "page" sẽ được tải, mọi thứ khác sẽ bị loại bỏ. Ngay cả khi bạn có nhiều trang hơn trong một số BODY chỉ trang đầu tiên sẽ được tải. Quy tắc này chỉ áp dụng cho các trang tiếp theo, nếu bạn có nhiều trang hơn trong một số HTML ban đầu, tất cả các trang sẽ được tải.
Đó là lý do tại sao nút của bạn hiển thị thành công nhưng sự kiện nhấp không hoạt động. Cùng một sự kiện nhấp chuột có phụ huynh HEAD bị bỏ qua trong quá trình chuyển đổi trang.
Dưới đây là một tài liệu chính thức: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
Đáng tiếc là bạn sẽ không tìm thấy điều này được mô tả trong tài liệu hướng dẫn của họ. Ether họ nghĩ rằng đây là một kiến thức phổ biến hoặc họ quên để mô tả này giống như các chủ đề khác của tôi. (Tài liệu jQuery Mobile lớn nhưng thiếu nhiều thứ).
Giải pháp 1
Trong trang thứ hai của bạn, và tất cả các trang khác, di chuyển SCRIPT thẻ của bạn vào nội dung BODY, như thế này:
<body>
<div data-role="page">
// And rest of your HTML content
<script>
// Your javascript will go here
</script>
</div>
</body>
Đây là một giải pháp nhanh chóng nhưng vẫn một cái xấu xí.
dụ làm việc có thể được tìm thấy trong câu trả lời khác của tôi ở đây: Pageshow not triggered after changepage
Một ví dụ làm việc: Page loaded differently with jQuery-mobile transition
Giải pháp 2
Move tất cả javascript của bạn vào HTML đầu tiên ban đầu. Thu thập mọi thứ và đặt nó bên trong một tệp js duy nhất, vào một số HEAD. Khởi tạo nó sau khi jQuery Mobile đã được tải.
<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>
Cuối cùng, tôi sẽ mô tả lý do tại sao đây là một phần của giải pháp tốt.
Giải pháp 3
Sử dụng rel = "bên ngoài" tại các nút của bạn và tất cả các yếu tố mà bạn đang sử dụng để thay đổi trang. Bởi vì nó ajax sẽ không được sử dụng để tải trang và ứng dụng jQuery Mobile của bạn sẽ hoạt động như một ứng dụng web thông thường. Thật không may đây không phải là một giải pháp tốt trong trường hợp của bạn. Phonegap không bao giờ hoạt động như một ứng dụng web thông thường.
<a href="#second" class="ui-btn-right" rel="external">Next</a>
tài liệu chính thức, tìm kiếm một chương: Linking without Ajax
giải pháp thực tế
giải pháp thực tế sẽ sử dụng Giải pháp 2. Nhưng không giống như giải pháp 2, tôi sẽ sử dụng cùng một tệp index.js đó và khởi tạo nó bên trong một HEAD của mọi trang khác có thể.
Bây giờ bạn có thể hỏi tôi TẠI SAO?
Phonegap như jQuery Mobile bị lỗi và sớm hay muộn sẽ có lỗi và ứng dụng của bạn sẽ không thành công (bao gồm DOM đã tải) nếu nội dung js của bạn nằm trong một tệp HTML. DOM có thể bị xóa và Phonegap sẽ làm mới trang hiện tại của bạn. Nếu trang đó không có javascript thì nó sẽ không hoạt động cho đến khi nó được khởi động lại.
Từ cuối cùng
Vấn đề này có thể dễ dàng được sửa với kiến trúc trang tốt. Nếu có ai quan tâm, tôi đã viết ARTICLE về kiến trúc trang jQuery Mobile tốt. Trong trình bao hạt, tôi đang thảo luận rằng kiến thức về cách hoạt động của jQuery Mobile là điều quan trọng nhất bạn cần biết trước khi bạn có thể tạo thành công ứng dụng đầu tiên.
câu trả lời khá hoàn hảo! Vì vậy, kết luận của chúng tôi là chúng tôi không thể tách từng tệp js thành từng trang? Điều đó làm cho ứng dụng của chúng tôi thực sự khó bảo tồn. Tôi sợ cho dù nó có nghĩa là một lỗi javascript sẽ làm cho toàn bộ ứng dụng xuống với JqueryMobile. –
Trong giải pháp 1, có quá xấu khi bao gồm tệp tập lệnh bên ngoài không? – ogborstad
Điều này chắc chắn không phải là một ý tưởng tồi, tôi thích có mọi thứ trong một tập tin bên ngoài. – Gajotres