2012-09-15 31 views
6

Tôi có một ứng dụng Mobile Phone Phonegap & hoạt động độc đáo trên Android và web. Trên iOS, tôi nhận được kết quả không mong muốn, điều này dường như là do sự kiện document.pageinit mà tôi ràng buộc trình xử lý cho hầu hết các quy trình của ứng dụng được kích hoạt hai lần.Tài liệu pageinit kích hoạt nhiều lần trên iOS (jQueryMobile)

Không, tôi không liên kết hai lần. Không, tôi không sử dụng document.ready. Có, tôi đã liên kết nó với tài liệu, sớm trong kịch bản và không phải bên trong bất kỳ chức năng nào khác.

$(document).on('pageinit',function(event){ 
    alert(' Pageinit on document'); 
    //Some more code 
}) 

Lần đầu tiên kích hoạt, màn hình khởi động vẫn hiển thị. Tại thời điểm này, trong khi thử nghiệm trên một MacBook Pro với XCode, giao diện điều khiển thậm chí không avaiable: thông báo trên đã không hiển thị trong giao diện điều khiển khi tôi sử dụng console.log.

Lần thứ hai xung quanh, đám cháy ngay sau khi jQueryMobile tạo trang đầu tiên.

Điều gì gây ra sự kích hoạt kép này và tôi có thể làm gì với điều này?

EDIT: Tôi nhận thấy sau đó tranginit không chỉ kích hoạt lần thứ hai, nhưng mỗi khi tôi mở một div data-role = 'page' mới. Xem câu trả lời của tôi dưới đây.

Trả lời

15

Tôi đánh giá cao Zoltans câu trả lời và nó có thể liên quan trong một số trường hợp, nhưng đó không phải là nguyên nhân.

$(document).on('pageinit') sẽ kích hoạt mọi chuyển đổi trang được sử dụng trong ứng dụng jQuery Mobile của bạn. Điều này sẽ xảy ra cả với các liên kết HTML và khi sử dụng $.mobile.changePage();.

Thật đáng kinh ngạc, docs không đề cập đến điều này ở bất cứ nơi nào: họ khuyên bạn nên sử dụng nó mà không đề cập rằng nó sẽ kích hoạt cho mọi trang tiếp theo.

Tôi không thể tin rằng chúng đang đóng khung ví dụ có vấn đề này là tương đương hợp lệ của $(document).ready().

Họ nên khuyên bạn nên liên kết bằng cách sử dụng .one() thay vì .bind() hoặc trên() để tránh thực thi nhiều mã.

+0

Thaaaaank bạn! Tôi đã tìm kiếm giải pháp cho vài phút cuối cùng, Google không cung cấp gì cho "pageinit được gọi là hai lần" và '.one()' của bạn là giải pháp lý tưởng. Tôi sẽ upvote bởi mười nếu tôi có thể :) – PiotrK

+0

Hơi ngạc nhiên, tôi đã nhìn thấy hành vi này khi sử dụng mã ứng dụng của tôi trong trình duyệt máy tính để bàn (IE10 và Chrome/Windows) chứ không phải trong iOS. Bản sửa lỗi được đề xuất này cũng đã giúp ích cho những trường hợp đó. Đề xuất tuyệt vời. Cảm ơn! –

2

Điều đó xảy ra vì tôi nghĩ bạn sử dụng điện thoại di động jquery và jquery cùng nhau. Nhưng giải pháp rất đơn giản. Hãy thử

$(document:not(.processed)).addClass('processed').on('pageinit',function(event) 

này nên giải quyết nó

2

Chỉnh sửa nội dung là <body data-role="page"> sẽ giải quyết được sự cố.

0

Tôi đã đấu tranh với vấn đề đó quá lâu để không chia sẻ với người khác. Và tôi nghĩ rằng nó không chỉ là vấn đề trong iOS mà còn dưới Android nữa (nó gây ra nhấp nháy trong trường hợp của tôi).

sự kiện "pageinit" được gọi hai lần mỗi khi có yêu cầu. Đầu tiên là một trong những thích hợp để có được dữ liệu cho url được cung cấp, một số khác được gọi sau khi trang mới được nạp vào DOM (trang jQueryMobile được tự động tiêm vào tài liệu).Tôi nghĩ rằng có nhiều giải pháp để giải quyết vấn đề này, ở đây đi tôi:

$(document).ready(function(){ 
    $(this).delegate("#page-selector", "pageinit", function(ev, data){}); 
    // I don't know why the line has to be present, but otherwise does not work 
}); 

Và tài liệu HTML của tôi trông giống như:

<html> 
<head>...here goes scripts...</head> 
<body> 
    <div id="#page-selector"> <!-- just wrapper --> 
     <div data-role="page"> 
     ... content... 
     </div> 
    </div> 
</body> 
</html> 

Tôi hy vọng nó sẽ tha cho thời gian quý báu cho những người khác!

Các vấn đề liên quan