Rails的5 - html5sortable - 排序是不是HTMLDocument.ready

Question

功能

我想實現HTML5 Sortable但我收到以下錯誤控制檯：

Uncaught TypeError: $(...).sortable is not a function at HTMLDocument.ready (checklistentries.self-d4e56bc….js?body=1:6) at fire (jquery.self-bd7ddd3….js?body=1:3233) at Object.add [as done] (jquery.self-bd7ddd3….js?body=1:3292) at jQuery.fn.init.jQuery.fn.ready (jquery.self-bd7ddd3….js?body=1:3543) at HTMLDocument. (checklistentries.self-d4e56bc….js?body=1:8) at HTMLDocument.dispatch (jquery.self-bd7ddd3….js?body=1:5227) at HTMLDocument.elemData.handle (jquery.self-bd7ddd3….js?body=1:4879) at Object.t.dispatch (turbolinks.self-c5acd7a….js?body=1:6) at r.t.Controller.r.notifyApplicationAfterPageLoad (turbolinks.self-c5acd7a….js?body=1:6) at r.t.Controller.r.pageLoaded (turbolinks.self-c5acd7a….js?body=1:6) ready @ checklistentries.self-d4e56bc….js?body=1:6 fire @ jquery.self-bd7ddd3….js?body=1:3233 add @ jquery.self-bd7ddd3….js?body=1:3292 jQuery.fn.ready @ jquery.self-bd7ddd3….js?body=1:3543 (anonymous) @ checklistentries.self-d4e56bc….js?body=1:8 dispatch @ jquery.self-bd7ddd3….js?body=1:5227 elemData.handle @ jquery.self-bd7ddd3….js?body=1:4879 t.dispatch @ turbolinks.self-c5acd7a….js?body=1:6 t.Controller.r.notifyApplicationAfterPageLoad @ turbolinks.self-c5acd7a….js?body=1:6 t.Controller.r.pageLoaded @ turbolinks.self-c5acd7a….js?body=1:6 (anonymous) @ turbolinks.self-c5acd7a….js?body=1:6

的html.sortable.js文件是應用程序/資產/ JavaScript的。

的application.js：

//= require jquery 
//= require autoNumeric 
//= require jquery_ujs 
//= require html.sortable 
//= require turbolinks 
//= require bootstrap-sprockets 
//= require_tree . 

checklistentries.js.coffee：

$(document).on 'turbolinks:load', -> 
    ready = undefined 

    ready = -> 
    $('.sortable').sortable() 
    return 

    $(document).ready ready 

頁來源：

<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/autoNumeric.self-dd668fd42a127caa6d3fdfe8fd18684196d330083a7d8ec688340565e75c84c1.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/html.sortable.self-fe26e0358d49c3b13b9a3d2b9116424ce1c281726e09b2b49e024336e6f233e5.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/bootstrap/transition.self-6ad2488465135ab731a045a8ebbe3ea2fc501aed286042496eda1664fdd07ba9.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/bootstrap/alert.self-742145c5bb847aafdadc6e339be795628f8bc25f177e851f03a8c42278eb0312.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/bootstrap/button.self-126ac9bf0e7f2d8568f8da3a00fd5f0fac6eae0946331003370161fbf8d7975e.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/bootstrap/carousel.self-e47323f363ceb3dc0bdbce05e36e709ed428e339833a41140a85cb0af24b8127.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/bootstrap/collapse.self-2eb697f62b587bb786ff940d82dd4be88cdeeaf13ca128e3da3850c5fcaec301.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/bootstrap/dropdown.self-561cca1cbaf67474e01e9536f106bad541594860a6df997004591c1c1957a147.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/bootstrap/modal.self-3e78617ade5663314b7ee0ea10375a5b34d59ffbade44939e3f2a4e4ef2019b3.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/bootstrap/tab.self-5bf7078b682f8b131332eefa46b45fa5eff2eca745fc0d03e2991450888f7c28.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/bootstrap/affix.self-6d6f1a7fc5c8aabf3547fa1b794fab6268f54bc55ad815e55873c71f52513517.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/bootstrap/scrollspy.self-969f3c5f48cdf1e439c7fa1154c13b948715f5c689f87837c0b64521d3b46ef6.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/bootstrap/tooltip.self-05afb177e08f98997ccfc84fa08a215e4b27d48d5fe4d049080675e9dffd8199.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/bootstrap/popover.self-0aa93860b59fe7393f1dd490f54b3cb994f9d6155adffce034d4e14ae361b041.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1" data-turbolinks-track="reload"></script> 
<script src="/assets/checklistentries.self-d4e56bc9119282b12909790c4eade57cd2ab3add9f726eb06ec3c34e986a1f24.js?body=1" data-turbolinks-track="reload"></script> 

我不知所措，爲什麼它不承認可分類的函數，這清楚地在我從github回購中獲得的html.sortabla.js文件中，並且js正在我的頁面之前加載。請幫忙！

Answer 1

這是排序的正確電話：

$(document).on 'turbolinks:load', -> 
    sortable('.sortable') 

謝謝大家！