使用Jquery加载方法与Slick插件

Using Jquery load method with Slick plugin

本文关键字:Slick 插件 方法 Jquery 加载 使用      更新时间:2023-09-26

我试图创建一个HTML页面(index.html)使用加载div从第二个HTML表(b.t HTML)。我想加载的内容显示在旋转木马使用Jquery光滑插件。我使用以下代码加载内容,然后将其放入旋转木马:

在index . html

<div id='includedContent' class='slides'></div>

在code.js文件

$("#includedContent").load("b.html"); 
$('.slides').slick();

div在页面中一个接一个地出现,但不是在旋转木马中出现。如果我将div直接包含在索引HTML文件(index. HTML)中,并简单地使用:$('.slides').slick();调用slick插件,它可以正常工作。

是否以不同的方式处理"加载"内容?非常新的JavaScript,所有的帮助感谢。

需要等待加载内容,只有加载内容后才初始化插件。因此,将代码移动到 load() 的成功回调函数中。在你的代码$('.slides')选择器将不会得到任何元素,因为它还没有加载。

$("#includedContent").load("b.html",function(){
   $('.slides').slick();
}); 

直接加载内容,调用.slick()加载器

$("#includedContent").load("b.html", function () {
  $('.slides').slick();
});

.load()将第二个参数作为加载内容后执行的函数。所以.slick(),在现有的内容上执行。不能像事件那样委托,所以使用success回调。