Question

我的网站上有退出弹出窗口，有退出弹出窗口的代码：

<script type="text/javascript">
      bioEp.init({
        html: '<div id="bio_ep_content">' +
        '<img src="/static/newsletter.png" alt="Newsletter" />' +
        '<span>Zapisz się do newslettera</span>' +
        '<span>Chcesz być na bieżąco z tym, co dzieje się w branży budowlanej? Zapisz się do naszego newslettera! Co 2 tygodnie otrzymasz wiadomość o najnowszych artykułach i inspiracjach!</span>' +
        '<form id="newsletter" class="newsletter exitpopup">' +
        '<input type="text" name="email" placeholder="Email" /> <input type="submit" value="Zapisz się" />' +
        '<span class="info error"></span>' +
        '<span class="info success"></span>' +
        '</form>' +
        '</div>',
        cookieExp: 0
    });
    </script>

新闻稿表格的代码与noraml表格完全相同，完全有效：

 <form id="newsletter">

        <input type="text" name="email" placeholder="Email" /> <input type="submit" value="Zapisz się" />
        <span class="info error"></span>
        <span class="info success"></span>
    </form>

<script>
    $('form#newsletter').on('submit', function() {
        var form = this;
        var data = form_fields(form, [ 'email' ]);
        form_post('/newsletter', data, false, function(ctx) {
            if(ctx['error']) {
                $(form).children('.info.error').html(ctx['error']);
                $(form).children('.info.success').html('');
            } else if(ctx['success']) {
                $(form).children('.info.error').html('');
                $(form).children('.info.success').html(ctx['success']);
            }
        });
        return false;
    });
</script>

但是当我在弹出窗口中输入此表单并提交此内容时，页面重新加载并没有任何反应。正常形式完全正常，所以我如何修复这个弹出窗体？

Answer 1

您必须将事件委托给父元素，因为在页面加载后生成表单，因此事件没有绑定到它：

$(document).on('submit', 'form#newsletter', function() {

这里$(document)可以用最接近的静态父元素替换。这可以是包含表单的任何其他包装元素，但在dom ready事件发生时必须加载。

表格不适用于弹出窗口

1 个答案: