JQuery Ruby 在 Rails 布局上的移动设备已损坏，只能通过重新加载修复

Question

我在 Rails 上用 jQuery 和 Ruby 创建了一个网站。当我加载第一页时它看起来不错，但是当我单击 link 时，第二页的布局被破坏了。

如果 Ajax 停用： 第二页的布局看起来甚至不再使用 JQuery Mobile。

如果 Ajax 被激活： 第二页的布局也被破坏。但它仍然具有 JQuery 移动元素。只有重新加载第二页才能使其显示正常布局。 Image of destroyed vs normal layout

我的 app/assets/javascripts/application.js 看起来像这样：

//= require jquery
//= require jquery_ujs
//= require jquery.mobile
//= require turbolinks
//= require_tree

我的 Link 在 index.html.etb 中看起来像这样：<a href="<%=url_for welcome_user_path %>"data-role="button" data-ajax="true">Login</a>

我的user.html.erb看起来像这样：

<div data-role="page" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 1099px;">
    <div data-role="header" class="ui-header ui-bar-a" role="banner">
        <h1 class="ui-title" role="heading" aria-level="1">Benutzer</h1>
    </div><!-- /header -->
    <div data-role="content" class="ui-content" role="main">
        <div data-role="tabs" id="tabs">
            <div data-role="navbar">
                <ul>
                    <li>
                        <a href="#one" data-theme="a" data-ajax="false" class="ui-btn-active"> <img src="/assets/cocktails/Nekromane.png" style="width:100px;"> <h1>Nekromane</h1></a>
                    </li>
                </ul>
            </div><!-- /navabar -->
        </div><!-- /tabs -->
    </div><!-- /content -->
</div><!-- /page -->

Answer 1

我在 Whosebug 上搜索了一段时间后找到了答案：

将此添加到 Gemfile：

gem 'jquery-turbolinks'

并将此添加到您的 assets/javascripts/application.js 文件：

//= require jquery.turbolinks

并移除

//= require turbolinks

并使用

的所有链接

data-ajax="false"

JQuery Ruby 在 Rails 布局上的移动设备已损坏，只能通过重新加载修复

JQuery Mobile with Ruby on Rails Layout destroyed, only fixed by reload

jquery

layout

ruby-on-rails

reload

jquery-mobile