jQuery Mobile ломает мой сайт

я загружаю jQuery Mobile на свой сайт, когда я нахожусь только на мобильном сенсорном устройстве. Когда я это сделаю. Это все портит. Например, меню select работают не совсем правильно, а также в нижней части страницы появляются слова "загрузка, загрузка, неопределенная". Я знаю, что мне чего-то не хватает, но не знаю чего.

любые идеи о том, что я могу потерять?

спасибо

EDIT: хорошо, поэтому я вытащил все скрипты, которые я запускаю, за исключением jQuery и jQuery Mobile. Сначала я звоню в jQuery, затем в jQuery Mobile. Это все еще ломает аспекты сайта.

что он ломается: - Я не могу перейти на любую другую страницу через навигационную панель, если я нажму на элемент навигации и посмотрю в url, появится правильный url (с # в нем), например: / # / about-us / затем он просто перенаправляется на домашнюю страницу, и страница становится белой

  • меню выбора имеют странные результаты. Он печатает все, что находится в select рядом с ним. И если ты ... ландшафтный режим на ipad и вы нажимаете на select, он отправляет вас в нижнюю часть страницы (странно).

  • он печатает "загрузка" дважды и "неопределенный" один раз в нижней части страницы

все, что у меня есть для скриптов, это jQuery и jQuery Mobile. Я также должен упомянуть, что я использую wordpress, поэтому он, возможно, запросил некоторые другие скрипты (я зарегистрировал версию jQuery Wordpress и запросил свой собственный)

кто-то еще возникают эти проблемы?

3 ответов


jQueryMobile замените обычные ссылки на Ajax один, поэтому каждая страница может быть загружена ajax, текст на странице docs:

(..) 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.

если вы хотите отключить одну ссылку для загрузки ajax, вы должны написать что-то вроде этого:

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

или сделать это в глобальном масштабе:

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

jm также делает замену на других элементах, поэтому вы должны попробовать использовать , например:

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

чтобы отключить замену этого элемент.


для таких, как я, где

$.mobile.ajaxEnabled = false;

не работал, и весь макет страницы, кажется, все еще сломан:

для меня это работает (- установите его в строку перед загрузкой мобильного файла jquery):

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

кроме того, если вы хотите отключить автоматическую ссылку jQuery mobile и обработку форм через ajax, установите (как сказал dvk3) ajaxEnabled в false и pushStateEnabled в false, как рекомендуется:

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

для получения дополнительной информации см.: http://api.jquerymobile.com/global-config/

Я использую v1.4.5


то же самое произошло со мной, смешивая mobile с другими фреймворками. Исправлена проблема, но получение пользовательской сборки jQuery.мобильный. Мой случай состоял в том, что мне нужно было провести для сенсорных устройств только так, чтобы использовать пользовательский файл min, и после этого ничего не было сломано.

Это действительно зависит от того, нужен ли вам jQuery.мобильный или вам нужен только определенный функционал, виджеты, события? Используйте пользовательскую версию, которую вы можете создать самостоятельно.

вы можете сделать и скачать твои : http://jquerymobile.com/download-builder/

надеюсь, это сработало и для вас, ребята!