Rails 应用程序（狂欢）- 突然 "Uncaught Type Error"
Rails App (Spree) - Sudden "Uncaught Type Error"
我在我的 Rails 应用程序上安装了全新的 Spree Commerce 运行 3.0 版本。我使用以下方法将 Slick Slider (slick.js) 添加到我的安装中：
已将 slick.js 添加到 vendor/assets/javascripts/spree/frontend
将相关的SCSS文件放入vendor/assets/stylesheets/spree/frontend
设置自定义主页 Deface 布局，然后使用 <script></script> 在底部调用 slick slider
一切顺利，我什至设置了一些漂亮的 custom.scss 样式。所以我提交更改，关闭 Codekit，然后移动位置。再次打开我的 Macbook，突然它抛出一个该死的 Uncaught TypeError: undefined is not a function。它被称为 $(".slider-for").slick({ ...
我已经对这件事情了如指掌，我不知道发生了什么变化，也不知道为什么它没有加载。 Slick 在资源中，jQuery 已加载，文件路径和元素都已适当命名。这让我发疯，我不知道该怎么办。
相关文件：
主页设置
<div class="slider-for">
<% @products.each do |product| %>
<div>
<div class="product-image">
<%= link_to product_image(product), product %>
</div>
<div class="product-info">
<h2 class="product-title"><%= product.name %></h2>
<div class="product-description">
<%= product.description.to_s.html_safe %>
</div>
<div class="product-link">
<div class="product-price">
<%= product.display_price %>
</div>
<div class="product-more">
<%= link_to "Read More", product, class: "more-link" %>
</div>
</div>
</div>
</div>
<% end %>
</div>
<div class="slider-nav">
<% @products.each do |product| %>
<div>
<div class="product-image">
<%= product_image(product) %>
</div>
<h4 class="product-title"><%= product.name %></h4>
</div>
<% end %>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".slider-for").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$(".slider-nav").slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
});
</script>
头部：
<head data-hook="inside_head">
<meta charset="utf-8">
<title>Grand on Oak Boutique Store - Grand on Oak</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
<meta name="keywords" content="boutique, boutique shop, clothing, clothing store">
<meta name="description" content="High-end shopping in Conway, Arkansas">
<link href="http://grandonoak.com/" rel="canonical">
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicon-69231eed30cd5a922a19b067ccf8b243.ico">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/frontend_bootstrap-f5a4d0dbd069cabee02f14c2de1040d5.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend-c946bacb82835ce1f9a9de94acfa7948.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/_variables-75e303a624880e205110a476763b276e.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/all-a523e282aabcd1ab0ec90f62c8f67344.css?body=1">
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="QD3LmjLGnTCtGkIX9NZw/W9UK5cP+LTB+aW5fQOErSCb/RgsfNOWvKDMNOJxbjXHkO5TS91cE54nKYDPeZJyow==">
<script src="/assets/jquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1"></script>
<script src="/assets/jquery_ujs-e27bd20a10d28155845a22d71ef94f2f.js?body=1"></script>
<script src="/assets/bootstrap/affix-86647d01ace516e05ddf78d2b6e85e20.js?body=1"></script>
<script src="/assets/bootstrap/alert-2a2796d28d7833f423ee421a3ad297bb.js?body=1"></script>
<script src="/assets/bootstrap/button-6b326d9b5034209f30109e77c264a190.js?body=1"></script>
<script src="/assets/bootstrap/carousel-31dbb9c732fc2da02b8d5a97d9ae0047.js?body=1"></script>
<script src="/assets/bootstrap/collapse-624b0c6035c65b5be6ae581d8dc4e196.js?body=1"></script>
<script src="/assets/bootstrap/dropdown-ce1bbc536745c41510513f7274f9897c.js?body=1"></script>
<script src="/assets/bootstrap/modal-77a0e72df31a788e4f6a3f28370eb69e.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy-3892c697f57b7e7b9d5993044235a210.js?body=1"></script>
<script src="/assets/bootstrap/tab-6f45b70c6440bd0222c171dd7a926b5d.js?body=1"></script>
<script src="/assets/bootstrap/transition-264673896da1e31c3b865db964cd6592.js?body=1"></script>
<script src="/assets/bootstrap/tooltip-718496fb53635605964fb77613425c8d.js?body=1"></script>
<script src="/assets/bootstrap/popover-3dcfaa462d273d183ef52064ce120a5b.js?body=1"></script>
<script src="/assets/bootstrap-sprockets-830839b3b00123a30d090955aa74da5c.js?body=1"></script>
<script src="/assets/jquery.validate/jquery.validate.min-2d81074928b8de12627110241d1e7b82.js?body=1"></script>
<script src="/assets/jsuri-b9ca271e978b987b894cb0a92de921d9.js?body=1"></script>
<script src="/assets/spree-8ac8776671ec803cc33e03272659d498.js?body=1"></script>
<script src="/assets/spree/frontend/cart-1590808ff9329c79b63acdc5a84bc498.js?body=1"></script>
<script src="/assets/jquery.payment-99cc3707e9b4c29e1d1be187415f6415.js?body=1"></script>
<script src="/assets/spree/frontend/checkout-82e3443fe70333ace69246f9b31b9507.js?body=1"></script>
<script src="/assets/spree/frontend/checkout/address-616b9ad86f44c5fa74398e99accc9eee.js?body=1"></script>
<script src="/assets/spree/frontend/checkout/payment-4df84c09e7418b7aa6394f472f10fec9.js?body=1"></script>
<script src="/assets/spree/frontend/product-09bee3d334f4f5507d01406128c60330.js?body=1"></script>
<script src="/assets/spree/frontend-54fe02bb1f643864d4c75b951a66652e.js?body=1"></script>
<script src="/assets/spree/frontend/slick-6fd6b8e406e07fa296d234cc3a4b2a72.js?body=1"></script>
<script src="/assets/spree/frontend/all-5a6ef0f53abed7a46fdc4793b7e2a630.js?body=1"></script>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
<link rel="next" href="/?page=2">
</head>
所有 Slick Slider 文件与 Git master 并发。已尝试变体，但目前在适当的根文件夹中有 slick.js、slick.scss、slick-theme.scss。
解决了！因为我在初始 Rails 安装后使用 Heroku 进行部署，所以我有一堆预编译资产显然会导致问题。
如果 jQuery 无缘无故地装傻，只需删除 public/assets 即可。或者，我认为您也可以重新预编译，这样就可以了。
希望这对其他人有帮助！我敢肯定，这是我的菜鸟错误，但我确实因此落后了一天。
我在我的 Rails 应用程序上安装了全新的 Spree Commerce 运行 3.0 版本。我使用以下方法将 Slick Slider (slick.js) 添加到我的安装中：
<script></script>一切顺利，我什至设置了一些漂亮的 custom.scss 样式。所以我提交更改，关闭 Codekit，然后移动位置。再次打开我的 Macbook，突然它抛出一个该死的 Uncaught TypeError: undefined is not a function。它被称为 $(".slider-for").slick({ ...
我已经对这件事情了如指掌，我不知道发生了什么变化，也不知道为什么它没有加载。 Slick 在资源中，jQuery 已加载，文件路径和元素都已适当命名。这让我发疯，我不知道该怎么办。
相关文件：
主页设置
<div class="slider-for">
<% @products.each do |product| %>
<div>
<div class="product-image">
<%= link_to product_image(product), product %>
</div>
<div class="product-info">
<h2 class="product-title"><%= product.name %></h2>
<div class="product-description">
<%= product.description.to_s.html_safe %>
</div>
<div class="product-link">
<div class="product-price">
<%= product.display_price %>
</div>
<div class="product-more">
<%= link_to "Read More", product, class: "more-link" %>
</div>
</div>
</div>
</div>
<% end %>
</div>
<div class="slider-nav">
<% @products.each do |product| %>
<div>
<div class="product-image">
<%= product_image(product) %>
</div>
<h4 class="product-title"><%= product.name %></h4>
</div>
<% end %>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".slider-for").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$(".slider-nav").slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
});
</script>
头部：
<head data-hook="inside_head">
<meta charset="utf-8">
<title>Grand on Oak Boutique Store - Grand on Oak</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
<meta name="keywords" content="boutique, boutique shop, clothing, clothing store">
<meta name="description" content="High-end shopping in Conway, Arkansas">
<link href="http://grandonoak.com/" rel="canonical">
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicon-69231eed30cd5a922a19b067ccf8b243.ico">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/frontend_bootstrap-f5a4d0dbd069cabee02f14c2de1040d5.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend-c946bacb82835ce1f9a9de94acfa7948.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/_variables-75e303a624880e205110a476763b276e.css?body=1">
<link rel="stylesheet" media="screen" href="/assets/spree/frontend/all-a523e282aabcd1ab0ec90f62c8f67344.css?body=1">
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="QD3LmjLGnTCtGkIX9NZw/W9UK5cP+LTB+aW5fQOErSCb/RgsfNOWvKDMNOJxbjXHkO5TS91cE54nKYDPeZJyow==">
<script src="/assets/jquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1"></script>
<script src="/assets/jquery_ujs-e27bd20a10d28155845a22d71ef94f2f.js?body=1"></script>
<script src="/assets/bootstrap/affix-86647d01ace516e05ddf78d2b6e85e20.js?body=1"></script>
<script src="/assets/bootstrap/alert-2a2796d28d7833f423ee421a3ad297bb.js?body=1"></script>
<script src="/assets/bootstrap/button-6b326d9b5034209f30109e77c264a190.js?body=1"></script>
<script src="/assets/bootstrap/carousel-31dbb9c732fc2da02b8d5a97d9ae0047.js?body=1"></script>
<script src="/assets/bootstrap/collapse-624b0c6035c65b5be6ae581d8dc4e196.js?body=1"></script>
<script src="/assets/bootstrap/dropdown-ce1bbc536745c41510513f7274f9897c.js?body=1"></script>
<script src="/assets/bootstrap/modal-77a0e72df31a788e4f6a3f28370eb69e.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy-3892c697f57b7e7b9d5993044235a210.js?body=1"></script>
<script src="/assets/bootstrap/tab-6f45b70c6440bd0222c171dd7a926b5d.js?body=1"></script>
<script src="/assets/bootstrap/transition-264673896da1e31c3b865db964cd6592.js?body=1"></script>
<script src="/assets/bootstrap/tooltip-718496fb53635605964fb77613425c8d.js?body=1"></script>
<script src="/assets/bootstrap/popover-3dcfaa462d273d183ef52064ce120a5b.js?body=1"></script>
<script src="/assets/bootstrap-sprockets-830839b3b00123a30d090955aa74da5c.js?body=1"></script>
<script src="/assets/jquery.validate/jquery.validate.min-2d81074928b8de12627110241d1e7b82.js?body=1"></script>
<script src="/assets/jsuri-b9ca271e978b987b894cb0a92de921d9.js?body=1"></script>
<script src="/assets/spree-8ac8776671ec803cc33e03272659d498.js?body=1"></script>
<script src="/assets/spree/frontend/cart-1590808ff9329c79b63acdc5a84bc498.js?body=1"></script>
<script src="/assets/jquery.payment-99cc3707e9b4c29e1d1be187415f6415.js?body=1"></script>
<script src="/assets/spree/frontend/checkout-82e3443fe70333ace69246f9b31b9507.js?body=1"></script>
<script src="/assets/spree/frontend/checkout/address-616b9ad86f44c5fa74398e99accc9eee.js?body=1"></script>
<script src="/assets/spree/frontend/checkout/payment-4df84c09e7418b7aa6394f472f10fec9.js?body=1"></script>
<script src="/assets/spree/frontend/product-09bee3d334f4f5507d01406128c60330.js?body=1"></script>
<script src="/assets/spree/frontend-54fe02bb1f643864d4c75b951a66652e.js?body=1"></script>
<script src="/assets/spree/frontend/slick-6fd6b8e406e07fa296d234cc3a4b2a72.js?body=1"></script>
<script src="/assets/spree/frontend/all-5a6ef0f53abed7a46fdc4793b7e2a630.js?body=1"></script>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
<link rel="next" href="/?page=2">
</head>
所有 Slick Slider 文件与 Git master 并发。已尝试变体，但目前在适当的根文件夹中有 slick.js、slick.scss、slick-theme.scss。
解决了！因为我在初始 Rails 安装后使用 Heroku 进行部署，所以我有一堆预编译资产显然会导致问题。
如果 jQuery 无缘无故地装傻，只需删除 public/assets 即可。或者，我认为您也可以重新预编译，这样就可以了。
希望这对其他人有帮助！我敢肯定，这是我的菜鸟错误，但我确实因此落后了一天。