jQuery Mobile phá vỡ trang web của tôi

Question

Tôi tải jQuery Mobile trên trang web của mình khi tôi chỉ sử dụng thiết bị màn hình cảm ứng di động. Khi tôi làm vậy. Nó làm rối tung mọi thứ. Ví dụ, các menu chọn không hoạt động hoàn toàn đúng, các từ "tải, tải, không xác định" xuất hiện ở cuối trang. Tôi biết tôi đang thiếu một cái gì đó nhưng không biết những gì.

Bất kỳ ý tưởng nào về những gì tôi có thể bị thiếu?

Cảm ơn

EDIT: OK, vì vậy tôi đã lấy tất cả tập lệnh mà tôi đang chạy ngoại trừ jQuery và jQuery Mobile. Tôi gọi jQuery trước, sau đó là jQuery Mobile. Nó vẫn phá vỡ các khía cạnh của trang web.

Nội dung giải thích: - Tôi không thể điều hướng đến bất kỳ trang nào khác thông qua thanh điều hướng, nếu tôi nhấp vào mục điều hướng và tìm url, url chính xác xuất hiện (với dấu # trong đó) như sau:/#/about-us/Sau đó, nó chỉ chuyển hướng đến trang chủ và trang có màu trắng

• Chọn menu có kết quả lạ. Nó in ra bất cứ điều gì là ở bên phải lựa chọn bên cạnh nó. Và nếu bạn ở chế độ ngang trên ipad và bạn bấm vào lựa chọn, nó sẽ gửi bạn đến cuối trang (lạ).

• nó in ra 'bốc' hai lần và 'undefined' một lần ở dưới cùng của trang

Tất cả tôi có cho các kịch bản là jQuery và jQuery Mobile. Tôi cũng nên đề cập rằng tôi đang sử dụng wordpress để nó có thể đã enqueued một số kịch bản khác (tôi đã deregistered Wordpress 'phiên bản của jquery và enqueued của riêng tôi)

Bất cứ ai khác gặp những vấn đề này?

Answer 1

jQueryMobile thay thế liên kết bình thường của bạn với Ajax một, vì vậy tất cả các trang có thể được nạp bởi ajax, văn bản trên trang tài liệu:

(..) Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

Nếu bạn muốn vô hiệu hóa liên kết duy nhất được nạp bởi ajax bạn nên viết một cái gì đó như thế này:

<a href="/some_page" data-ajax="false" >link</a> 

hoặc làm điều đó trên toàn cầu:

$(document).bind("mobileinit", function() { 
    $.mobile.ajaxEnabled = false; 
}); 

jm cũng không thay thế trên các yếu tố khác vì vậy bạn nên thử sử dụng data-role thuộc tính, ví dụ:

<select id="test" data-role="none"> 

để vô hiệu hóa thay thế yếu tố này.

Answer 2

Đối với những người như tôi, nơi

$.mobile.ajaxEnabled = false; 

đã không làm việc và bố trí toàn bộ trang dường như vẫn bị hỏng:

Đối với tôi một này làm việc (- thiết lập nó inline trước khi tải jquery tập tin di động):

<script> 
    // Preload configuration 
    $(document).on("mobileinit", function() { 
     $.mobile.autoInitializePage = false; // This one does the job 
    }); 
</script> 

Hơn nữa, nếu bạn muốn vô hiệu hóa jQuery di động liên kết tự động và hình thành xử lý thông qua ajax, thiết lập (như dvk3 nói) ajaxEnabled false và pushStateEnabled false theo khuyến cáo:

$.mobile.ajaxEnabled = false; 
$.mobile.pushStateEnabled = false; // Recommended is false, when ajax is disabled 

Để biết thêm thông tin xem: http://api.jquerymobile.com/global-config/

Tôi đang sử dụng v1.4.5

Answer 3

Cùng xảy ra với tôi bằng cách trộn di động với các khuôn khổ khác. Đã khắc phục sự cố nhưng nhận được bản dựng tùy chỉnh của jQuery.mobile. Trường hợp của tôi là tôi cần vuốt cho các thiết bị cảm ứng chỉ để sử dụng tệp min tùy chỉnh và không có gì bị hỏng sau đó.

Nó thực sự phụ thuộc nếu bạn cần jQuery.mobile hoặc bạn chỉ cần một chức năng nhất định, Widget, sự kiện? Sử dụng phiên bản tùy chỉnh mà bạn có thể tự xây dựng.

Bạn có thể thực hiện và tải về của bạn ở đây: http://jquerymobile.com/download-builder/

Tôi hy vọng nó làm việc cho bạn quá chàng trai!