Bootstrap Switch JS being called, but doing nothing

Question

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>

Answer 1

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();
});