导航到其他页面

Question

我在Magnific弹出窗口遇到了一个奇怪的问题。我有两个单独的页面，链接到相同的启用Magnific的弹出窗口。

1. 点击第1页的启用扩展功能的链接---弹出窗口。关闭弹出窗口并再次单击也可以正常工作。
2. 单击第1页上的链接转到第2页。
3. 点击第2页的启用了mangific的链接---弹出窗口无法启动。
4. 重新加载第2页的浏览器。
5. 点击第2页的启用扩展功能的链接---弹出窗口出现。关闭弹出窗口并再次单击也可以正常工作。
6. 单击第2页上的链接转到第1页。
7. 点击第1页的启用扩展功能的链接---弹出窗口无法启动。
8. 重新加载第1页的浏览器。
9. 点击第1页的启用扩展功能的链接---弹出窗口。关闭弹出窗口并再次单击也可以正常工作。
10. 从第2步开始重复。

我将fixedContentPos选项设置为true，因此当弹出窗口启动时背景不会滚动。在我上面列出的弹出窗口没有的每个例子中，后台不会滚动，就像弹出窗口一样。我查看过检查员，看到附加了overflow:hidden属性，即停止后台滚动。但是，弹出的DOM元素不存在。

这是一个Rails网站顺便说一句。我在静态版本上测试了相同的Javascript代码，它按预期工作，所以我想知道这是否与Rails如何处理路由有关？

任何帮助将不胜感激！

Answer 1

我猜你启用了Turbolinks（它只是通过替换内容来加快页面加载，但它不会触发$（文档）.ready（））

您应该像这样绑定图像链接：

$(document).on('ready page:load', function(event) {
  $('.test-popup-link').magnificPopup({ ...});
});

或禁用turbolinks