jquery - 如何在我的 View 中包含 Jquery UI slider ？

Question

我正在尝试将 slider ( http://simeydotme.github.io/jQuery-ui-Slider-Pips/#installation )合并到我的 View 中，这应该是 jquery-ui 的一部分。我的 Gemfile 中有这些

gem 'jquery-rails'
gem 'jquery-ui-rails'

当我打开 Gemfile.lock 时，我看到了

jquery-rails (4.3.1)
  rails-dom-testing (>= 1, < 3)
  railties (>= 4.2.0)
  thor (>= 0.14, < 2.0)
jquery-ui-rails (6.0.1)
  railties (>= 3.2.16)

但是尽管我的页面上有这个 HTML

<div class="slider"></div>

我包含了这个 Javascript

$('.slider').slider().slider('pips');

我收到 JS 控制台错误

Uncaught TypeError: $(...).slider is not a function

当我的页面加载时。文档说我必须包含 jQuery 2.1.1 和 Jquery UI 2.1.1。我不知道我这样做是否正确。

编辑:包括 app/assets/application.js 的内容以响应给定的答案...

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

Answer 1

似乎一切正常，您需要一些自定义，例如 assets/application.js在文件顶部添加排序，例如

//= require jquery
//= require jquery_ujs

确保jquery不渲染两次，你的 slider正确包含库，然后编辑 slider JS像下面这样

(function($){
    "use strict";
    $(document).on('ready', function(){
        $('.slider').slider().slider('pips');
    });
});

或者像下面这样

$(document).on('turbolinks:load', function(){
    $('.slider').slider().slider('pips');
});

对于重构，您可以使用此 js在 slider 下方使用 <script type="text/javascript"> .... </script> 的同一页面上标签

执行此操作后重新启动服务器以获得更好的响应

回复评论更新

The issue is you're probably calling the js function before it's (JS Library) loaded. Also, check this

希望对你有帮助