生成的 Foundation 6 均衡器无法均衡 [参见示例]答案

【问题标题】：Generated Foundation 6 Equalizer fails to equalize [see example]生成的 Foundation 6 均衡器无法均衡 [参见示例]
【发布时间】：2016-07-22 21:31:38
【问题描述】：

我生成了一些带有均衡标签的 html 元素，然后将它们附加到页面上。这里使用Zurb's Foundation 6 equalization example code，稍作修改。

问题

我的 html 页面有一个按钮，单击该按钮会创建代码。

元素最初看起来具有均衡的元素高度，但是当将它们调整为最小尺寸然后再调整回全屏时，它们并没有均衡。

我正在使用他们的模板系统在 underscore.js 中执行此操作，但我也仅使用 jquery 对此进行了测试，效果相同。

foundation.html

<!DOCTYPE html>
<html>
<head>
    <title>Foundation Equalizer Fail Test</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css" rel="stylesheet">
</head>
<body>

    <input type="button" value="Generate Equalizer">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/g/foundation@6.2.3(foundation.min.js+js/foundation.abide.js+js/foundation.core.js+js/foundation.equalizer.js+js/foundation.util.mediaQuery.js+js/foundation.accordion.js+js/foundation.accordionMenu.js+js/foundation.drilldown.js+js/foundation.dropdown.js+js/foundation.dropdownMenu.js+js/foundation.interchange.js+js/foundation.magellan.js+js/foundation.offcanvas.js+js/foundation.orbit.js+js/foundation.responsiveMenu.js+js/foundation.responsiveToggle.js+js/foundation.reveal.js+js/foundation.slider.js+js/foundation.sticky.js+js/foundation.tabs.js+js/foundation.toggler.js+js/foundation.tooltip.js+js/foundation.util.box.js+js/foundation.util.keyboard.js+js/foundation.util.motion.js+js/foundation.util.nest.js+js/foundation.util.timerAndImageLoader.js+js/foundation.util.touch.js+js/foundation.util.triggers.js)"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script type="text/template" id="t_underscore">
        <div class="row" data-equalizer data-equalize-on="medium">
            <div class="medium-4 columns">
                <div class="callout" data-equalizer-watch>
                <img src= "http://foundation.zurb.com/sites/docs/assets/img/generic/square-1.jpg">
                </div>
            </div>
            <div class="medium-4 columns">
                <div class="callout" data-equalizer-watch>
                <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
                </div>
            </div>
            <div class="medium-4 columns">
                <div class="callout" data-equalizer-watch>
                <img src= "http://foundation.zurb.com/sites/docs/assets/img/generic/rectangle-1.jpg">
                </div>
            </div>
        </div>
    </script>
    <script type="text/javascript">
        $(document).foundation();
        var template = _.template($("#t_underscore").html());
        var t = $(template());
        $("input[type=button]").on("click", function() {
            $("body").append(t).foundation();
        });
    </script>
</body>
</html>

它使用所有 cdns 和远程图像，因此它应该在所有浏览器上正确显示。

我注意到一些与正常运行的基础均衡设置不同的地方：

我的均衡 div 上没有 data-events="resize" 标签
它在元素上设置height: auto;，而不是它们的像素大小。

【问题讨论】：

标签： javascript zurb-foundation-6 underscore.js-templating foundation-equalizer

【解决方案1】：

我向 Zurb Foundation 提出了问题并收到了解决方案。

虽然文档没有明确说明这一点：当将基础元素附加到页面时，它们不能包含基础标签

包含基础标签的行：

<div class="row" data-equalizer data-equalize-on="medium">

成为：

<div class="row">

我的脚本变成了：

<script type="text/javascript">
    $(document).foundation();
    var template = _.template($("#t_underscore").html());
    $("input[type=button]").on("click", function() {
        $("body").append(template);
        var equalizer = new Foundation.Equalizer($(template), {"data-equalize-on": "medium"});
    });
</script>

【讨论】：