Question

当我只在移动触摸屏设备上时，我在我的网站上加载了jQuery Mobile。当我这样做的时候。它弄乱了一切。例如，选择菜单不能正常工作，页面底部会出现“加载，加载，未定义”字样。我知道我错过了什么，但不知道是什么。

关于我可能遗失的任何想法？

由于

编辑：好的，所以除了jQuery和jQuery Mobile之外，我拿出了我正在运行的所有脚本。我首先调用jQuery，然后调用jQuery Mobile。它仍然打破了网站的各个方面。

它打破了什么： - 我无法通过导航栏导航到任何其他页面，如果我点击导航项目，并查看网址，会出现正确的网址（其中带有＃），如：/＃/ about-us /那么，它只是重定向到主页，页面变白

选择菜单有奇怪的结果。它打印出旁边的选择权中的任何内容。如果您在ipad上以横向模式进行操作并单击选择，则会将您发送到页面底部（很奇怪）。
它打印出'loading'两次，并在页面底部打印一次'undefined'

我所有的脚本都是jQuery和jQuery Mobile。我还应该提一下，我正在使用wordpress，因此它可能已经排队了一些其他脚本（我已经取消注册了Wordpress的jquery版本并将我自己排队）

其他人遇到这些问题？

Answer 1

jQueryMobile用Ajax替换您的普通链接，因此每个页面都可以通过文档页面上的ajax文本加载：

(..) 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还会对其他元素进行替换，因此您应该尝试使用data-role属性，例如：

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

禁用替换此元素。

Answer 2

对于像我这样的人

$.mobile.ajaxEnabled = false;

不起作用，整个页面布局似乎仍然破碎：

对我来说这个有用（ - 在加载jquery移动文件之前将其设置为内联）：

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

此外，如果你想通过ajax禁用jQuery移动自动链接和表单处理，请按照建议设置（如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

Answer 3

通过将移动设备与其他框架混合，我也发生了同样的事情。修复了问题，但获得了jQuery.mobile的自定义构建。我的情况是我只需要刷触摸设备，所以使用自定义最小文件，之后没有任何东西被打破。

这真的取决于你是否需要jQuery.mobile或者你只需要某个功能，Widgets，事件？使用您可以自己构建的自定义版本。

您可以在此处制作和下载：http://jquerymobile.com/download-builder/

我希望它也适合你们！

jQuery Mobile打破了我的网站

3 个答案: