gpt4 book ai didi

javascript - ajax .load() 破坏了我的 slider

转载 作者:行者123 更新时间:2023-12-03 05:02:23 25 4
gpt4 key购买 nike

我遇到了一个奇怪的错误,load() 破坏了我的轮播。

我有一个Slick Slider有 3 张幻灯片。您可以单击“下一张”按钮移至下一张幻灯片。您还可以单击幻灯片本身,它会使用以下命令将内容加载到猫的 div 和一些文本中:

$('.frame').load(url);

该错误是,在查看加载的内容并单击“BACK”后,“NEXT”按钮不再起作用。不知怎的,它打破了导航。我尝试过 show() 和 hide() 但这没有帮助。

请查看我的codepen demo

这是 url如果您觉得有用,我将加载该演示。

感谢您花时间帮助我:)

最佳答案

正如我在对您的问题的评论中所述,您的 Slick Slider 插件在加载其他文档后停止工作的原因是因为其他文档将 jQuery 库重新包含到您的顶级浏览上下文中。

jQuery 插件通过定义一个新方法然后将其附加到 jQuery.prototype 来使其自身可访问。 (别名为 jQuery.fn )对象。

当您通过脚本标记将 jQuery 库包含到文档中时,您可以调用 console.log(jQuery.fn);您将看到一个对象,其中包含构成 jQuery 库的所有便捷方法。

在您类似地包含 Slick Slider 后图书馆,您可以再次调用console.log(jQuery.fn);你可以发现它有一个名为 slick 的方法属性.

问题是当您加载位于 url 的文档时该文档正在插入一个新的 script标记到您的父文档中,其 src是 jQuery。这会导致 jQuery 库的重新加载,从而消除您的初始实例。如果您调用console.log(jQuery.fn.slick);此时你会发现是undefined .

我以前从未见过将整个 HTML 文档(而不是 HTML 片段)加载到 div 中。另一个文档的。这是将不应该存在的元素插入到顶级文档的正文中,例如 <head><body> 。事实上,我很惊讶这给您带来了很少的问题。

文档通常嵌套在其他文档中的方式是使用 iframe 。 iframe 内的文档将是自己的沙箱,其样式和脚本不会与父框架中的冲突。

您可以通过替换 $('.frame').load(url); 在您的项目中实现 iframe类似于以下内容:

var $iframe = $('<iframe />', {
src: url,
style: 'height:100%; width:100%;'
});
$('.frame').html($iframe);

关于javascript - ajax .load() 破坏了我的 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42171038/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com