ajax .load() 打破了我的滑块
Posted
技术标签:
【中文标题】ajax .load() 打破了我的滑块【英文标题】：ajax .load() breaking my slider 【发布时间】：2017-06-29 11:45:02 【问题描述】：我遇到了一个奇怪的错误，其中 load() 正在破坏我的轮播。
我有一个带有 3 张幻灯片的 Slick Slider。您可以单击“下一步”按钮移至下一张幻灯片。您还可以单击幻灯片本身并将内容加载到猫的 div 和一些文本中：
$('.frame').load(url);
BUG 是在查看加载的内容并单击 BACK 后，NEXT 按钮不再起作用。不知何故，它打破了导航。我试过 show() 和 hide() 但这没有帮助。
请看我的codepen demo
这是url，如果你觉得有用的话，我会加载到那个演示中。
感谢您花时间帮助我:)
【问题讨论】：
您正在加载的文档有一个脚本标签，其 src 是 jQuery。这会导致 jQuery 再次加载到您的主文档中，并且新的 jQuery 会覆盖第一个。被覆盖的 jQuery 没有引用 slick 插件，因此调用插件方法会引发错误。 @76484 谢谢，从源 URL 中删除 JQuery 修复了这个错误！如果您将此作为答案发布，我很乐意将其标记为已解决。我还有一个问题，如果我想在我的源代码中有一些 JQ，我该怎么做，将两者链接到同一个 JQ 文件？谢谢你:) @76484 酷我认为加载的url可以使用原始url中的jq文件，再次感谢！ 我很高兴这可行，但这有点奇怪。这意味着 cat 文档依赖于 jQuery，但不加载它。如果 cat 文档不需要自给自足，我认为您应该一起取消该文档并将其内容移动到父文档并根据需要显示和隐藏。 @76484 这是一个公平的观点。我的计划是像一个投资组合一样使用它，最初只加载项目的图像，然后单击加载一个真正编码繁重的项目并无缝淡入，因此在项目加载时没有白色窗口。就像这个叉子，它将猫图像加载到另一个带有文本的猫图像。 s.codepen.io/katiemoons/debug/31a610580332a470e2dce0c89797e8dd 【参考方案1】：正如我在对您的问题的评论中所说，您的 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 的 sn-p 相对）加载到另一个文档的 div 中。这是在顶层文档的正文中插入不应该存在的元素，例如<head> 和<body>。实际上，我很惊讶这会为您带来如此几个问题。
文档通常嵌套在其他文档中的方式是使用iframe。 iframe 中的文档将是自己的沙箱，其样式和脚本不会与父框架中的样式和脚本发生冲突。
您可以通过将 $('.frame').load(url); 替换为以下内容来在您的项目中实现 iframe：
var $iframe = $('<iframe />',
src: url,
style: 'height:100%; width:100%;'
);
$('.frame').html($iframe);
【讨论】：
以上是关于ajax .load() 打破了我的滑块的主要内容，如果未能解决你的问题，请参考以下文章