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 函数时，它会在我的代码中添加多张幻灯片，我不知道这是怎么回事。如果你知道，请帮助我摆脱困境。

标签： jquery ruby-on-rails slider nested-forms slick.js

【解决方案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调用。不要同时使用两者。

【讨论】：