slick.js 中的错误:“未捕获的 TypeError:无法读取属性 'add' of null”
Posted
技术标签:
【中文标题】slick.js 中的错误:“未捕获的 TypeError:无法读取属性 \'add\' of null”【英文标题】:Error in slick.js: "Uncaught TypeError: Cannot read property 'add' of null"slick.js 中的错误:“未捕获的 TypeError:无法读取属性 'add' of null” 【发布时间】:2016-06-23 10:10:43 【问题描述】:我使用 slick js 来实现图像的滑块视图。
这是我的代码。
<div class="slider_wrap add-remove">
<%= f.fields_for :images do |image_form| %>
<%#= render 'images_fields', :f => image_form %>
<div>
<%= image_tag image_form.object.picture.url,:class=>"drop_down_link even img_prev" %>
</div>
<div class="image_upload_div">
<div class="image-upload">
<label>
<i class="fa fa-cloud-upload">
<%= image_form.file_field :picture ,:'data-role'=>"none",:onchange=>"readURL(this);" , :accept => 'image/jpeg , image/png' %>
</i>
</label>
</div>
</div>
<% end %>
<%= f.link_to_add "Add a picture", :images ,:id=>"add_pic" ,:class=>"js-add-slide", :style=>"display: none;"%>
</div>
<script>
function silder()
slideIndex = 0;
$('.add-remove').slick(
slidesToShow: 2,
slidesToScroll: 2
);
$('.js-add-slide').on('click', function()
$('.add-remove').slick('slickAdd');
);
$('.js-remove-slide').on('click', function()
$('.add-remove').slick('slickRemove');
);
);
function readURL(input)
if (input.files && input.files[0])
var reader = new FileReader();
reader.onload = function (e)
$('.img_prev').last()
.attr('src', e.target.result)
;
reader.readAsDataURL(input.files[0]);
setTimeout(function()
$('#add_pic').trigger('click');
silder();
, 100);
</script>
现在有了这段代码,我让滑块工作了,但它不正确,我收到错误:
未捕获的类型错误:无法读取 null 的属性“添加”
【问题讨论】:
当您尝试在同一个元素上加载 slick 两次时会发生这种情况。在您的实现中似乎发生了同样的事情。 @VenkatCh 当我触发addslide 函数时,它会在我的代码中添加多张幻灯片,我不知道这是怎么回事。如果你知道,请帮助我摆脱困境。 【参考方案1】:这是由于calling init twice。这没有错误:
$(".slider").not('.slick-initialized').slick()
另外,“silder”看起来像是一个错字。
依赖超时也容易出错。不幸的是,Internet Explorer uses a different event to tell you when the html elements and JS libraries have been loaded. 有很多库可以避免 100 行左右的跨浏览器代码,但是流行且相对较小的 jQuery 解决了这样的计时问题:
$(function()
// Handler for .ready() called. Put the Slick Slider etc. init code here.
)
【讨论】:
也为我工作。谢谢Cees! $(".slider").not('.slick-initialized').slick() 这段代码应该在哪里写? @ManishGoswami 任何地方 after 您的滑块 HTML 元素和 slick 库都已加载。我添加了一个 jQuery 示例。 太棒了!非常感谢! @CeesTimmerman 我应该在哪里写这段代码,你的链接显示 404 competa.com/blog/…【参考方案2】:对我来说,我也有类似的情况。它发生在我身上,当我使用页面构建器内部的光滑来保存页面内容时。所以
光滑初始化
class 是用那个元素添加的,我们正在尝试再次调用 js。这让我们打了两次电话,但没有为我们工作。因此,如果您将其保存在 HTML 内容中。 div中的用户slick-initialized类或者使用js调用。不要同时使用两者。
【讨论】:
以上是关于slick.js 中的错误:“未捕获的 TypeError:无法读取属性 'add' of null”的主要内容,如果未能解决你的问题,请参考以下文章