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

admin管理员组

文章数量:1296316

I installed Foundation 6 using bower. I keep getting multiple warning in the console every-time I use any Foundation 6 - JavaScript based plugin.

Exact warning :

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

My script includes look like:

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

The warning is triggered by the following code present in foundation.js at line 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;
      }

I have tried re-installing from scratch but it still doesn't work. Similar question exists in Zurb Foundation Forum but till now there is no good answer.

How do I resolve this?

I installed Foundation 6 using bower. I keep getting multiple warning in the console every-time I use any Foundation 6 - JavaScript based plugin.

Exact warning :

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

My script includes look like:

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

The warning is triggered by the following code present in foundation.js at line 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;
      }

I have tried re-installing from scratch but it still doesn't work. Similar question exists in Zurb Foundation Forum but till now there is no good answer.

How do I resolve this?

• javascript
• jquery
• zurb-foundation
• bower

Share Improve this question Follow edited Aug 31, 2016 at 7:02 Hari Harker asked Aug 22, 2016 at 9:49 Hari HarkerHari Harker 78722 gold badges1313 silver badges3232 bronze badges 2

• 1 I am having the same issue, but on a reveal! And its causing a malfunction in the reveal itself. It handles an image that is updated through a scope variable. After you click on the reveal once it doesnt update again."Tried to initialize reveal on an element that already has a Foundation plugin." – BGecko Commented Aug 22, 2016 at 19:46
• 2 @BGecko : I resolved the issue. It is occurring because I have mentioned $(document).foundation(); at the end of my html and also in my app.js. Remove either one of these and the warning goes off. – Hari Harker Commented Aug 24, 2016 at 17:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

UPDATE

For Version 6.4.*, all plugins and js based elements tend to work only if $(document).foundation(); is mentioned within the html file. So delete it from app.js if you have written in it. For additional reasons, go through the explanation below.

---

Although I have mentioned the answer long back in the ments of the question, I felt it will be better to write it up with few more points.

While installing Zurb Foundation 6 using bower (mand line), it gives you a nice index.html page to get started which has the <script> tag that refers to an external js file located at root\js\app.js. The app.js file by default has the following code:

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

So basically, you already have everything to get started.

But, this wasn't the way how it worked until Foundation 6 and I wasn't aware of these changes. I didn't go through the contents of app.js as I was assuming it to be empty. I simply did the old way of invoking them in my html pages by writing the following code:

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

This kind of double referred the jQuery based Foundation elements raising a warning at the browser console.

Solution was to remove either of the invocation, but actually removing the code written in external js file makes more sense for the following reasons:

1. External references cost an additional http request, very slightly increasing the precious page load time. Why not reduce it, if you can.
2. Invoking jQuery based elements in the site has to be done as early as possible so that every element gets the original shape in no time. So it makes more sense to mention the invocation within a html page rather than request a external file to invoke. So, remove the code mentioned in the external js file, that is your app.js file. The warnings would vanish.
3. For Version 6.4.*, all plugins and js based elements tend to work only if mentioned within the html file.

The best solution to this problem is to put $(document).foundation(); inside <script> tag under .html file, and remove it form external .js file (app.js)

Like this-,

in

xyz.html

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

other solution like, putting it inside external .js file (app.js), and removing it from .html file, will not always works.

at least it didn't work for me.

Tested on-

foundation version 6.4.2

本文标签：