Zurb Foundation equalizer plugin - 'equalizer' is not an available method for this element?

Question

I am trying to use Zurb Foundation equalizer plugin for this grid layout below:

 <div class="row eq-height" data-equalizer>

    <div class="medium-3 columns" data-equalizer-watch>
        <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1240" alt=""> </a>
    </div>

    <div class="medium-6 columns" data-equalizer-watch>
        <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x603" alt=""> </a>
    </div>

    <div class="medium-3 columns" data-equalizer-watch>
        <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
    </div>

</div>

I have the plugin loaded:

<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">

<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>

<!-- https://cdnjs.com/libraries/foundation/6.3.0 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/plugins/foundation.equalizer.js"></script>

And call the plugin:

<script>
  $(function() {
    $(document).foundation('equalizer', 'reflow');
  });
</script>

But I get this error instead:

Uncaught ReferenceError: We're sorry, 'equalizer' is not an available method for this element.
    at r.fn.init.a [as foundation] (foundation.min.js:1)
    at HTMLDocument.<anonymous> (cdn.html:112)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

Any ideas what i have missed?

Answer 1

Try with $(document).foundation(); to definition foundation.

With $(document).foundation('equalizer', 'reflow'); you are trying to refresh equalizer but you don't have already defined.