0

问题：

Bootstrap Switch 在某些浏览器中不会切换，并且仅在页面重新加载时加载，而不是在首次访问时加载。（我需要将其作为 2 个单独的问题吗？）

解释：

我一直在研究这个，终于弄清楚为什么没有触发事件切换。但是，当用户第一次导航到该页面时，该开关仍然没有出现。他们必须重新加载页面才能显示开关。此外，该开关在 Chrome 中正常工作，但在 Safari 和 Firefox 中不能正常工作。（如本视频所示：视频显示故障

版本：

红宝石：2.2.1p85（2015-02-26 修订版 49769）[x86_64-darwin14]

导轨：4.2.0

宝石：引导开关导轨 3.3.3

野生动物园：8.0.8 (10600.8.9)

Firefox：24.0（我注意到这是一个非常旧的版本，因为 40.0.2 是他们当前的版本）

铬：45.0.2454.93（64 位）

我的代码：

宝石文件

gem 'bootstrap-switch-rails', '~> 3.3.3'

应用程序/资产/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
//= require bootstrap-switch

应用程序/资产/样式表/application.css

/*
*= require_tree .
*= require_self
*= require bootstrap3-switch
*= require rails_bootstrap_forms
*/

此代码添加在<head>以下页面的信息中：

应用程序/视图/布局/_header.html.erb

<script type="text/javascript">
    $(document).ready(function() {
        $('input:checkbox').bootstrapSwitch();
    });
</script>

此信息在页面本身上

app/views/devise/registrations/edit.html.erb

<div class="col-md-3">
    <%= f.label :private, "Private" %>
    <%= f.check_box :private, :data => { :size => 'large', 'on-color'=>'success', 'on-text'=>'On', 'off-text'=>'Off', 'animate'=>'true'}, :label=>'This sets your profile to be hidden from searches' %>
</div>

问题：

1) 为什么开关在初次访问时不加载，只在重新加载页面时加载？

2) 为什么这个开关只能在 Chrome 中正常工作，而不能在 Safari 和 Firefox 中正常工作？

4

1 回答 1

0

在研究了我的问题的第一部分（为什么开关在初次访问时不加载并且只在重新加载页面时加载？），我想出了以下答案，这也解决了第二个问题（为什么开关只能正常工作在 Chrome 中而不是在 Safari 或 Firefox 中？）

我在 StackOverflow 上发现了一个问题（Jquery 仅在 rails 4 应用程序中的页面刷新时加载），@Ian 提供的答案解决了我的两个问题。

解决方案：

@Ian 建议使用名为jquery-turbolinks的 gem 。

代码

这是我添加/更改的代码（我按照gem 的 github 页面上的说明进行操作）。

Gemfile（添加了以下行）：

gem 'jquery-turbolinks'

app/assets/javascripts/application.js（我添加了这一行）：

//= require jquery.turbolinks

并将我的资产的顺序更改为如下所示：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require_tree .
//= require bootstrap-sprockets
//= require bootstrap-switch
//= require turbolinks

解释：

因此，除非刷新页面，否则不会显示开关的原因是由于 turbolinks 功能。这需要通过 AJAX 获取页面上的信息，而无需重新加载 CSS 和 JQuery。这使页面加载时间更快，并且是一个很好的功能；但是，可能会导致问题，例如我看到在初始页面加载时没有调用必要的 JQuery。

这个 gem ( jquery-turbolinks ) 通过调用 JQuery 但仍然使用 turbolinks 解决了这个问题。因此，在我的个人资料编辑页面的初始加载中，开关出现了。

现在，即使在刷新页面时，也一定是 JQuery 无法正确加载的问题，这导致切换出现错误。现在脚本都运行正常，该开关在 Safari、Chrome 和 Firefox 中运行正常。所以，这两个问题都解决了！

于 2015-09-24T21:12:43.677 回答