Foundation 6 - 控制台警告：尝试在已有 Foundation 插件的元素上初始化 magellan（任何 JS 插件）

Question

我使用 bower 安装了 Foundation 6。每次我使用任何 Foundation 6 - JavaScript based plugin 时，我都会在控制台中收到多个 warning。

确切警告：

Tried to initialize magellan on an element that already has a Foundation plugin.

我的脚本看起来像：

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
        $(document).foundation();  
</script>

警告由 foundation.js 中第 180 行的以下代码触发：

// For each plugin found, initialize it
    $elem.each(function () {
      var $el = $(this),
          opts = {};
      // Don't double-dip on plugins
      if ($el.data('zfPlugin')) {
        console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin.");
        return;
      }

我已经尝试 re-installing 从头开始，但还是不行。 Zurb Foundation Forum 中也有类似的问题，但至今没有很好的答案。

我该如何解决？

Answer 1

更新

对于版本 6.4.*，所有基于 plugins 和 js 的元素都倾向于工作仅如果$(document).foundation(); 在 html 文件中提到。因此，如果您在其中写入，请将其从 app.js 中删除。对于其他原因，请阅读下面的解释。

虽然我早就在问题的comments中提到了答案，但我觉得还是多写几个点比较好。

在使用 bower（命令行）安装 Zurb Foundation 6 时，它会为您提供一个不错的 index.html 页面以供您开始使用，其中的 <script> 标记指向external js 文件位于 root\js\app.js。默认情况下 app.js 文件具有以下代码：

$(document).foundation(); //invoke all jQuery based Foundation elements

所以基本上，您已经具备了开始的一切条件。

但是，在 Foundation 6 之前，这并不是它的工作方式，我也不知道这些变化。我没有检查 app.js 的内容，因为我假设它是 empty。我只是通过编写以下代码在 html 页面中使用旧方法调用它们：

<script type="text/javascript">
  $(document).foundation();
</script>

这种 double 引用了基于 jQuery 的 Foundation 元素，在浏览器控制台上引发了 warning。

解决方案是删除任一调用，但实际上删除写在 external js 文件中的代码更有意义，原因如下：

外部引用需要额外的 http 请求，增加宝贵的页面加载时间。如果可以，为什么不减少它。
必须尽早调用站点中基于 jQuery 的元素，以便每个元素立即获得原始形状。因此，在 html 页面中提及调用比请求外部文件调用更有意义。所以，删除外部js文件中提到的代码，也就是你的app.js文件。警告将消失。
对于版本 6.4.*，所有基于 plugins 和 js 的元素都倾向于工作仅如果html 文件中提到。

Answer 2

这个问题最好的解决办法就是把$(document).foundation();放在<script>里面 标记在 .html 文件下，并将其从外部 .js 文件中删除 (app.js)

像这样-,

在

xyz.html

<script type="text/javascript">
  $(document).foundation();
</script>

其他解决方案，例如将其放入外部 .js 文件 (app.js)，然后将其从 .html 文件中删除，并不总是有效。

至少它对我不起作用。

测试于-

foundation version 6.4.2

Foundation 6 - 控制台警告：尝试在已有 Foundation 插件的元素上初始化 magellan（任何 JS 插件）

Foundation 6 - Console Warning : Tried to initialize magellan (any JS plugin) on an element that already has a Foundation plugin

javascript

jquery

zurb-foundation

bower