Question

我正在尝试实现HTML5 Sortable，但我在控制台中收到以下错误：

未捕获TypeError：$（...）。sortable不是函数在HTMLDocument.ready（checklistentries.self-d4e56bc ... .js？body = 1：6）在火上（jquery.self-bd7ddd3 ... .js？body = 1：3233） at Object.add [as done]（jquery.self-bd7ddd3 ... .js？body = 1：3292）在jQuery.fn.init.jQuery.fn.ready（jquery.self-bd7ddd3 ... .js？body = 1：3543）在HTMLDocument。（？checklistentries.self-d4e56bc ...的.js体= 1：8）在HTMLDocument.dispatch（jquery.self-bd7ddd3 ... .js？body = 1：5227）在HTMLDocument.elemData.handle（jquery.self-bd7ddd3 ... .js？body = 1：4879）在Object.t.dispatch（turbolinks.self-c5acd7a ... .js？body = 1：6）在r.t.Controller.r.notifyApplicationAfterPageLoad（turbolinks.self-c5acd7a ... .js？body = 1：6）在r.t.Controller.r.pageLoaded（turbolinks.self-c5acd7a ... .js？body = 1：6）准备好@ 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（匿名）@ 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体= 1：6 t.Controller.r.notifyApplicationAfterPageLoad @ turbolinks.self-c5acd7a ... .js？body = 1：6 t.Controller.r.pageLoaded @ turbolinks.self-c5acd7a ... .js？body = 1：6（匿名）@ turbolinks.self-c5acd7a ...的.js体= 1：6

html.sortable.js文件位于app / assets / javascripts中。

的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 repo获得的html.sortabla.js文件中的js是在我的页面之前加载的。请帮忙！

Answer 1

这是可排序的正确调用：

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

谢谢大家！

Rails 5 - html5sortable - sortable不是HTMLDocument.ready中的函数

1 个答案: