javascript - Rails 上的“未定义不是函数”

Question

我正在研究我的 Ruby on Rails 项目，我正在尝试使用 noUislider，我还使用 Big Picture html 模板。但是我一直遇到“未定义不是函数”

这是我的 application.js 文件。我现在正在使用 colorPicker 示例作为测试。我很确定我以正确的顺序包含了 jQuery。

//= require jquery-1.10.2
//= require jquery-ui-1.10.4
//= require jquery_ujs
//= require jquery.poptrox.min
//= require skel.min
//= require init
//= require jquery.nouislider
//= require Link
//= require_tree .


// On document ready, initialize noUiSlider.


$(function(){
    $('.slider').noUiSlider({
        start: 127,
        connect: "lower",
        orientation: "vertical",
        range: {
            'min': 0,
            'max': 255
        },
        serialization: {
            format: {
                decimals: 0
            }
        }
    });


    function setColor() {

        // Get the slider values,
        // stick them together.
        var color = 'rgb(' +
            $("#red").val() + ',' +
            $("#green").val() + ',' +
            $("#blue").val() +
            ')';

        // Fill the color box.
        $(".result").css({
            background: color,
            color: color
        });
    }

// Bind the color changing function
// to the slide event.
$('.slider').on('slide', setColor);
});

这是 index.html.erb 文件

<div id="controller_main" class="content box style2 light_controller">
<ul class="lights_list">
  <li id="light1" class="lights">
    <span>Light 1</span></br>
    <div class="slider light_image"></div>
    <div class="slider" id="red"></div>
    <div class="slider" id="green"></div>
    <div class="slider" id="blue"></div>
</li>
</ul>

</div>

我在这个问题上花了 10 多个小时，所以请有人救我.....我需要这个尽快工作。

请让我知道我是否需要提供其他任何东西来解决问题。

编辑： 我删除了整个项目，而不是使用脚手架，我只创建了一个控制器和一个名为 index 的视图并将模板代码放入其中。它有效。但是我仍然不知道为什么它以前不起作用。使用模板也很痛苦，因为您必须将其集成到 rails 中，并且某些路径是内部的硬代码，不可能使其完全发挥作用。

Answer 1

来自http://api.jquery.com/jQuery.noConflict/。尝试使用这个

jQuery.noConflict();
(function( $ ) {
    $(function() {
        $('.slider').noUiSlider({
            start: 127,
            connect: "lower",
            orientation: "vertical",
            range: {
                'min': 0,
                'max': 255
            },
            serialization: {
                format: {
                    decimals: 0
                }
            }
        });
        // the rest of your code
    });
})(jQuery);