jquery - 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 元素。

当我点击链接“++”时，我的控制台出现错误

Uncaught TypeError: Cannot read property 'defaultView' of null

如果我然后运行

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

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

有什么想法吗？ (我也在使用 JQuery Migrate 库)

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("加载", function () {

修复选项 2

使用 jQuery Migrate 版本 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/