引导开关调用JS，但什么也不做 [英] Bootstrap Switch JS being called, but doing nothing

问题描述

我使用bootstrap和jQuery，但我目前正试图添加在Bootstrap Switch。我开始去保险，因为我不能得到它的工作。从检查元素，看起来好像js没有修改任何html。

我试过使用gem或直js / css。我试过从宝石的sass和css。不管什么看起来像js没有做任何事情。如果我删除bootstrap-switch js文件，然后我得到一个错误（这是有道理的），所以我知道它被调用。

以下是我的设置：

Gems

使用sass（3.3.2）
使用bootstrap-sass（3.1.1.0）
使用bootstrap-switch-rails （2.0.2）
使用jquery-rails（3.1.0）
使用sass-rails（4.0.1）


Application.css.scss

  @importbootstrap; 
 @importbootstrap3-switch; 
  

Application.js

  // = require jquery 
 // = require jquery_ujs 
 // = require bootstrap 
 // = require bootstrap-switch 
 // 
 // = require_tree。 
  

other.js

  $（＃famous-people-switch）。bootstrapSwitch（）; 
  

some.html.erb

 < div class =col-md-6> 
< input id =famous-people-switchtype =checkboxname =famous-peoplechecked> 
< h4>着名人物：< / h4> 
< / div> 
  

解决方案

尝试将您的代码包装在DOM准备好的处理程序 $（function（）{...}）; 以确保在执行jQuery代码之前正确加载所有DOM元素：

  $（function（）{
 $（＃famous-people-switch）。bootstrapSwitch（）; 
}）; 
  

I'm using bootstrap and jQuery, but I'm currently trying to add in Bootstrap Switch. I'm starting to go insance because I cannot get it to work. From inspecting the element, it looks as though the js isn't modifying any html.

I've tried using either the gem or the straight js/css. I tried both sass and css from the gem. No matter what it looks like the js isn't doing anything. If I remove the bootstrap-switch js file then I get an error (which makes sense), so I know it's getting called. It just doesn't do anything.

Below is pieces of my setup:

Gems

Using sass (3.3.2)
Using bootstrap-sass (3.1.1.0)
Using bootstrap-switch-rails (2.0.2)
Using jquery-rails (3.1.0)
Using sass-rails (4.0.1)

Application.css.scss

@import "bootstrap";
@import "bootstrap3-switch";

Application.js

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

other.js

$("#famous-people-switch").bootstrapSwitch();

some.html.erb

<div class="col-md-6">
  <input id="famous-people-switch" type="checkbox" name="famous-people" checked>
  <h4>Famous People:</h4>
</div>

解决方案

Try to wrap your code inside DOM ready handler $(function() {...}); to make sure all of your DOM elements are loaded properly before executing your jQuery code:

$(function() {
    $("#famous-people-switch").bootstrapSwitch();
});

这篇关于引导开关调用JS，但什么也不做的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！