如何检测是否已实例化jQuery lightslider，以及如果是，则如何清除实例

我正在使用JQuery lightSlider 。 它工作得很好（实际上，我必须稍微修改一下代码，但现在已足够了）。

我想要实现的是用ajax返回数据动态替换lightSlider内容，我可以这样做。

对于每个新数据集，我再次调用lightSlider插件。 这是我的ajax函数的“成功”或“完成”部分：

var lightsliderstring = ""; for(i=1;i<thumbsArray.length;i++){ lightsliderstring += "
\n"; if( $("#as_feature").val() ){ lightsliderstring += " 
" + $("#as_feature").val() + " photo " + i + "
\n"; } lightsliderstring += " \n"; lightsliderstring += "
\n"; } $("#lightSlider").html(lightsliderstring); $('#lightSlider').lightSlider({ auto: true, gallery: false, item: 1, loop: true, slideMargin: 0, thumbItem: 0 }); 

我再次调用lightSlider，每次调用新的ajax，因为只调用一次lightSlider似乎不起作用。 也许是因为内容是在加载DOM后动态创建的？ 无论如何，我想做的是在每次ajax调用之后清除lightSlider函数，因为我认为它们在同一个div中彼此堆积在一起。

在一次lightSlider调用之后，它看起来很好：

但是在我的第二个ajax调用中，当lightSlider再次被实例化时，它开始“堆栈”。 注意双箭头，垂直未对齐，以及图片下方索引点的垂直加倍：

解决这个问题的方法是清除lightSlider的第一个实例。

Answer 1

假设您使用的是比1.1.3更新的lightslider版本，您应该能够.destroy（）现有实例，如下所示：

 var slider = $('#lightslider').lightSlider(); slider.destroy(); 

为了安全起见，您需要在调用destroy方法之前检查滑块是什么！

Answer 2

$("#lightSlider").empty()或$("#lightSlider").html('')因某些原因无效。 每次提交新表格时，灯光实例都会继续堆积。 我不知道为什么。 也没有("#lightSlider").lightslider().destroy()方法似乎工作，这可能是由于某些奇怪的原因，我无法确定，也许与我操纵DOM的方式有关， 我不知道。

最终工作的是将

...

块嵌套在

...

...

块中。 然后，在每个新表单提交时，我用$("#carousel-container").html('');删除了整个#lightSlider块$("#carousel-container").html(''); 然后我用新的，更新的内容动态地重新创建了整个

...

。 这是工作代码：

  $("#carousel-container").html(''); var lightsliderstring = "
"; for(i=1;i\n"; } lightsliderstring += " \n"; lightsliderstring += "\n"; } lightsliderstring += "
\n"; $("#carousel-container").html(lightsliderstring); $('#lightSlider').lightSlider({ auto: true, gallery: false, item: 1, loop: true, slideMargin: 0, thumbItem: 0 });