Foundation 5 Reveal 不适用于 JQuery 3.1.1

Question

使用 Chrome 50 & JQuery 3.1.1 我正在尝试让基本的 Foundation Reveal 模式发挥作用。我已经从 Zurb 站点上的基本示例中复制了代码，并将其放在我页面的 body 标记中。

<a href="#" data-reveal-id="myModal" id="test">++</a>
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <h2 id="modalTitle">Security Details</h2>
   <p>My message</p>
    <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

并且我已验证所有库都在加载。我页面上的最后一个脚本片段是

<script>
    $(document).foundation();
</script>

我知道这是有效的，因为我正在使用其他有效的 Foundation 元素。

当我单击 link“++”时，我的控制台出现错误

Uncaught TypeError: Cannot read property 'defaultView' of null

如果我那么运行

$('#myModal').foundation('reveal', 'open');

在控制台上显示显示对话框，从那时起直到我重新加载页面，“++”link 也可以工作。所以我猜测在设置的某个地方 link 的点击事件不起作用，但是 JQuery 错误消息没有意义。

有什么想法吗？（我也在使用 JQuery 迁移库）

Answer 1

我认为您的问题是 jQuery 3 (https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed) 中引入的重大更改，特别是 .load 的删除，您可能在某种程度上意识到了这一点使用 Migrate 库，所以我不会大谈特谈。

Migrate 似乎并不总是适用于 Foundation 的遗留版本（请参阅此处的问题：https://github.com/zurb/foundation-sites/issues/8975），但由于有几种不同的意见，所以确切地说这有点模糊。

好消息是您有两个修复选项。

修正选项一

Zurb 建议的修复方法是手动修补对 .load 的所有损坏引用。我找不到 F5 的列表，但这是 F6 之一，我猜它们非常相似（pr >> https://github.com/zurb/foundation-sites/pull/8923/commits/c0b42643da96d3b297f3d7c35ccdcebed92ad7a1）。不是那么多文件，受影响的是：

dist/foundation.js
dist/plugins/foundation.interchange.js
dist/plugins/foundation.util.triggers.js
js/foundation.interchange.js
js/foundation.util.triggers.js

都是同一个问题；使用折旧后的 .load(fn)

如果你觉得很大胆，你可以全局替换所有实例：

.load(function () {

和

.on("load", function () {

修复选项 2

使用 jQuery 迁移的 1.4.1 版。我不完全确定为什么 1.4.1 可以工作而后来的版本不能工作（或者为什么他们完全跳过版本 2）但是它可以工作，所以这可能是一个足够好的开始。（3.0.0 和 3.0.1-rc 都会产生错误，当试图让 jQuery 3 工作时，这似乎有点违反直觉）。

使用 F 5.5.3、JQ 3.1.1 和 JQM 1.4.1 >> https://jsfiddle.net/tymothytym/fxbk6h1d/

Answer 2

tymothytym 答案的替代方法是让您的 link 手动调用基础显示方法。即

将您的模态 link 替换为：

<a data-reveal-id="myModal" data-reveal>

至

<a data-legacy-reveal-id="#myModal">

然后将其添加到您的 js 代码中以捕获点击并手动打开模式：

$('a[data-legacy-reveal-id]').click(function(e){
   e.preventDefault(e);
   $($(this).data('legacy-reveal-id')).foundation('reveal', 'open');
});

Foundation 5 Reveal 不适用于 JQuery 3.1.1

Foundation 5 Reveal not working with JQuery 3.1.1

jquery

zurb-foundation