Question

问题：

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

说明

我一直在研究这个问题，并最终找出了为什么没有触发事件切换。但是，当用户首次导航到该页面时，该开关仍然不会显示。他们必须重新加载页面才能显示交换机。此外，该开关在Chrome中正常工作，但不适用于Safari和Firefox。（如本视频所示：Video Showing malfunction

版本：

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

Rails：4.2.0

宝石：bootstrap-switch-rails 3.3.3

Safari：8.0.8（10600.8.9）

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

Chrome：45.0.2454.93（64位）

我的代码：

的Gemfile

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

应用程序/资产/ Javascript角/ 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>

此信息在页面上

应用程序/视图/设计/注册/ 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中正常工作？

Answer 1

在研究了我的问题的第一部分之后（为什么在初次访问时没有切换负载而只在重新加载页面？），我想出了以下答案，这也解决了第二个问题（为什么呢？交换机只能在Chrome中正常工作，而不能在Safari和Firefox中正常工作吗？）

我在StackOverflow（Jquery gets loaded only on page refresh in rails 4 application）上找到了一个问题，@ Ian提供的答案解决了我的两个问题。

<强>解决方案：

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

<强>代码

以下是我添加/更改的代码（我按照gem's github page上的说明进行操作。）

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中正常运行。所以，这两个问题都解决了！

Bootstrap Switch事件处理程序在Safari和Firefox中不起作用

1 个答案: