jQuery Mobile không chạy javascript phụ

Question

Tôi đang tạo phiên bản di động của trang web hiện tại và tôi đang tìm kiếm giải thích cho sự cố mà tôi đang gặp phải (dưới dạng jQuery Mobile noob).

Trang này có hiệu ứng phản chiếu jquery trên hình ảnh đầu tiên: http://m.fijitourism.com/accommodation/coral-coast/bedarra-beach-inn/ (thực hiện điều này bằng cách áp dụng hiệu ứng cho bất kỳ hình ảnh nào có lớp 'phản ánh').

Nếu bạn đi thẳng đến trang, tải js và phản xạ hoạt động tốt trên hình ảnh. Tuy nhiên, nếu bạn đã điều hướng đến trang từ đây, trang mẹ, js phản chiếu không hoạt động: http://m.fijitourism.com/accommodation/coral-coast/

Từ những gì tôi hiểu, điều này liên quan đến tải ajax của thiết bị di động jquery. Tôi đã tìm thấy rằng nếu tôi sử dụng 'data-ajax = "false"' trên liên kết từ trang gốc, thì js phản ánh sẽ tải không sao.

Câu hỏi của tôi là:

-là có một/cách chính xác hơn tốt hơn để đạt được sự phản ánh mà không sử dụng dữ liệu ajax = "false" vào liên kết trang mẹ? Tôi hiểu rằng đây không thực sự là những gì 'data-ajax = "false"' được thiết kế cho. Tài liệu chính thức nói để sử dụng nó 'nếu bạn đang liên kết từ một trang di động được tải thông qua Ajax đến một trang có chứa nhiều trang nội bộ', mà tôi thì không.

-Giải thích về lý do tại sao tải ajax ngăn cản js phản chiếu sẽ tuyệt vời.

Answer 1

Hóa ra là có một trang mà tôi đã bỏ lỡ trong tài liệu chính thức đối phó với vấn đề này chính xác: http://jquerymobile.com/test/docs/pages/page-scripting.html

Để thực thi mã bất cứ khi nào một trang mới được nạp và được tạo ra bởi hệ thống định vị Ajax , bạn phải liên kết với sự kiện pagecreate.

Sự kiện pagecreate được kích hoạt trên trang đang được khởi tạo, ngay sau khi khởi tạo xảy ra. Chúng tôi khuyên bạn nên ràng buộc với sự kiện này thay vì DOM sẵn sàng() vì điều này sẽ hoạt động bất kể trang được tải trực tiếp hay nội dung được kéo vào trang khác như một phần của hệ thống điều hướng Ajax.

$ ('# aboutPage'). Sống ('pagecreate', function (event) {alert ('Trang này vừa được cải tiến bởi jQuery Mobile!');});

Answer 2

Vấn đề này được giải thích ở đây: http://view.jquerymobile.com/1.3.2/dist/demos/faq/scripts-and-styles-not-loading.html

Trước hết, sau khi bạn chắc chắn rằng kịch bản của bạn hoạt động khi bạn làm mới trang với trình duyệt, bạn có thể sửa chữa các giải pháp jquerymobile.

Kịch bản cơ bản nên được sử dụng trên tất cả các trang trong điều hướng và các tập lệnh cụ thể theo trang phải được viết bên trong phần tử data-role = "page". Vì không có ví dụ điển hình trên trang web jquerymobile, và có một chút khó khăn khi thực hiện công việc này, tôi có một ví dụ ở đây để làm cho mã hoạt động cả trên điều hướng ajax jquerymobile và làm mới trang.

// this code is inside the data-role="page" element, as well as the possible script src tag 
$(window).on('pageinit', function() { 
    // do normal $(document).ready() code here basically 
    }); 
}); 

Answer 3

Tôi đã giải quyết vấn đề này bằng cách thay đổi cách tôi tải trang của mình. Tôi đặt target = "_ self" vào phần tử href để nó không tải bằng cách sử dụng hệ thống #.

• Tôi sẽ đặt liên kết dưới đây trên trang index.html của tôi sẽ điều hướng đến trang signup.html của tôi.

<a href="signup.html" target="_self" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">Signup</a>

Chú ý: Bạn sẽ mất phần 'ưa thích' trang jQuery Mobile chuyển tính năng