Firefox不在切换的div中加载wuFoo表单

Question

一位客户要求我将中的联系人替换为wufoo表单。默认情况下，保存表单的div设置为显示none，然后在单击“单击此处”div时显示slideToggle。这在chrome或safari中不是问题，但在firefox中不起作用？

html：

<div class="brideclick">
                    Click here to email us
                    </div>

                    <div class="brideform pad-none">
                        <div id="wufoo-rei92q70h44gkt">
                        Fill out my <a href="link-to-wufoo-form">online form</a>.
                    </div>
                        <script type="text/javascript">var rei92q70h44gkt;(function(d, t) {
                        var s = d.createElement(t), options = {
                        'userName':'theweddingaffair',
                        'formHash':'rei92q70h44gkt',
                        'autoResize':true,
                        'height':'2359',
                        'async':true,
                        'host':'wufoo.com',
                        'header':'show',
                        'ssl':true};
                        s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
                        s.onload = s.onreadystatechange = function() {
                        var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
                        try { rei92q70h44gkt = new WufooForm();rei92q70h44gkt.initialize(options);rei92q70h44gkt.display(); } catch (e) {}};
                        var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
                        })(document, 'script');</script>
                    </div>

jQuery：

$( ".brideclick" ).click(function() {
$( ".brideform" ).slideToggle( "slow", function() {
});
});

CSS：

.brideform{
    display: none;
}

Answer 1

在脚本中尝试：

$(document).on('click','.brideclick',function() {
    $( ".brideform" ).slideToggle( "slow");
});

Answer 2

最近我也遇到了同样的问题。我不得不在两个地方调整容器的高度。

Wufoo代码中的

1. 和我的脚本中用于内容展开按钮的
2. 。

Wufoo有一个解决方案：https://help.wufoo.com/articles/en_US/kb/Embed

我必须按照上面的说明操作，并在单击"Answer“时调整div容器的高度，以获得如下形式：

<script type="text/javascript">
var wufooClickText = document.querySelector('#wufoo-click-text');
var wufooFormContainer = document.querySelector('#wufoo-xxxxxxxxxxxxxx');
var answerLink = wufooClickText.querySelector('.answer');

    answerLink.addEventListener('click', function(e) {
        e.preventDefault();
        wufooClickText.style.display = "none";
        wufooFormContainer.style.display = "block";
        wufooFormContainer.style.height ="2120px";
    });

</script>

这为我修复了它，这样当我的回答按钮被点击时，整个表单就会出现在FF，Chrome & Safari上。但是，它并不完美，因为移动表单较长，因为桌面上的两列项目在移动设备上切换为单列，而字段信息在移动设备上的字段下。所以我必须让容器的高度足够移动(因为我不想要滚动条)，这会在表单下面的桌面上留下很大的空间。