Mengapa Skrip Mudah Alih jQuery Saya Hanya Berfungsi pada Halaman Pertama?-tutorial js-php.cn

Mengapa Skrip Mudah Alih jQuery Saya Hanya Berfungsi pada Halaman Pertama?

Barbara Streisand

Lepaskan： 2024-11-12 03:34:02

asal

234 orang telah melayarinya

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

Bau seperti DOM...

Salah satu soalan mudah alih jQuery yang paling biasa ialah "Mengapa saya perlu meletakkan semua skrip ke index.html" . Sesetengah jawapan yang anda akan dapati di sana mengandungi lebih banyak bunyi daripada fakta. Soalan ini akan menerangkan kepada anda secara terperinci cara jQuery Mobile berfungsi dan mengapa skrip anda tidak akan berfungsi jika anda terlupa memasukkannya.

Cara jQuery Mobile mengendalikan perubahan halaman

Untuk memahami perkara ini situasi anda perlu memahami bagaimana jQuery Mobile berfungsi. Ia menggunakan ajax untuk memuatkan halaman lain.

Halaman pertama dimuatkan seperti biasa. HEAD dan BODYnya dimuatkan ke dalam DOM dan mereka berada di sana untuk menunggu kandungan lain. Apabila halaman kedua dimuatkan, hanya kandungan BODYnya dimuatkan ke dalam DOM. Untuk lebih tepat, malah BADAN tidak dimuatkan sepenuhnya. Hanya div pertama dengan atribut data-role="page" akan dimuatkan, semua yang lain akan dibuang. Walaupun anda mempunyai lebih banyak halaman di dalam BODY hanya halaman pertama sahaja yang akan dimuatkan. Peraturan ini hanya terpakai pada halaman berikutnya, jika anda mempunyai lebih banyak halaman dalam HTML permulaan, kesemuanya akan dimuatkan.

Itulah sebabnya butang anda berjaya dipaparkan tetapi acara klik tidak berfungsi. Peristiwa klik yang sama yang induknya HEAD diabaikan semasa peralihan halaman.

Penyelesaian 1

Dalam halaman kedua anda dan setiap halaman lain, gerakkan SKRIP teg ke dalam kandungan BODY, seperti ini:

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

Salin selepas log masuk

Ini adalah penyelesaian yang cepat tetapi masih lagi buruk.

Contoh yang berkesan boleh didapati dalam jawapan saya yang lain di sini:

Tayangan halaman tidak dicetuskan selepas perubahan halaman

Contoh lain yang berfungsi:

Halaman dimuatkan secara berbeza dengan jQuery-mobile peralihan

Penyelesaian 2

Alihkan semua javascript anda ke dalam HTML pertama yang asal. Kumpulkan semuanya dan letakkan di dalam satu fail js, ke dalam

HEAD. Mulakan ia selepas jQuery Mobile telah dimuatkan.

<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>

Salin selepas log masuk

Akhirnya saya akan menerangkan mengapa ini adalah sebahagian daripada penyelesaian yang baik.

Penyelesaian 3

Gunakan

rel="external" dalam butang anda dan setiap elemen yang anda gunakan untuk menukar halaman. Kerana itu ajax tidak akan digunakan untuk memuatkan halaman dan apl Mudah Alih jQuery anda akan berkelakuan seperti aplikasi web biasa. Malangnya ini bukan penyelesaian yang baik dalam kes anda. Phonegap tidak boleh berfungsi sebagai apl web biasa.

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

Salin selepas log masuk

Dokumentasi rasmi, cari bab:

Memaut tanpa Ajax

Penyelesaian realistik

Penyelesaian realistik akan menggunakan

Penyelesaian 2. Tetapi tidak seperti penyelesaian 2, saya akan menggunakan fail index.js yang sama dan memulakannya di dalam HEAD setiap halaman lain yang mungkin.

Sekarang anda boleh bertanya kepada saya

KENAPA ?

Phonegap seperti jQuery Mobile adalah buggy, dan lambat laun akan berlaku ralat dan apl anda akan gagal (termasuk DOM yang dimuatkan) jika setiap kandungan js anda berada di dalam satu fail HTML. DOM boleh dipadamkan dan Phonegap akan memuatkan semula halaman semasa anda. Jika halaman itu tidak mempunyai javascript, ia tidak akan berfungsi sehingga ia dimulakan semula.

Atas ialah kandungan terperinci Mengapa Skrip Mudah Alih jQuery Saya Hanya Berfungsi pada Halaman Pertama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!