Error in slick.js: "Uncaught TypeError: Cannot read property 'add' of null"
Error in slick.js: "Uncaught TypeError: Cannot read property 'add' of null"
我使用 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>
现在使用此代码我可以使滑块正常工作,但它不正确我收到错误消息:
Uncaught TypeError: Cannot read property 'add' of null
这是由于 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.
})
我也遇到过类似的情况。当我使用 pagebuilder 内部的 slick 来保存页面内容时,它就发生在我身上。所以
slick-initialized
class 添加了该元素,我们正在尝试再次调用 js。这让我们打了两次电话,但未能为我们工作。因此,如果您将其保存在 HTML 内容中。 div中的用户slick-initializedclass或者用js调用。不要一起使用。
我使用 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>
现在使用此代码我可以使滑块正常工作,但它不正确我收到错误消息:
Uncaught TypeError: Cannot read property 'add' of null
这是由于 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.
})
我也遇到过类似的情况。当我使用 pagebuilder 内部的 slick 来保存页面内容时,它就发生在我身上。所以
slick-initialized
class 添加了该元素,我们正在尝试再次调用 js。这让我们打了两次电话,但未能为我们工作。因此,如果您将其保存在 HTML 内容中。 div中的用户slick-initializedclass或者用js调用。不要一起使用。