无法在宏伟的弹出窗口中提交带有 AJAX 的表单答案

【问题标题】：Can't submit form with AJAX inside of a magnific popup无法在宏伟的弹出窗口中提交带有 AJAX 的表单
【发布时间】：2014-11-29 18:19:00
【问题描述】：

我在模态框内提交了一个表单（使用 magnific-popup 插件制作），但我遇到了问题。当每次加载页面时都会显示弹出窗口时，我可以使用 AJAX 汇总此表单。但是如果我想在点击按钮后加载模式，我不能用 AJAX 提交它。有一个工作和不工作的代码示例。只是有细微的差别。

不工作：

<script type="text/javascript">
$(document).ready(function() {
    // jQuery Validation
    $("#sleva").validate({
        // if valid, post data via AJAX
        submitHandler: function(form) {
                $.post("/mail.php", { email: $("#email2").val(), sleva: "ano" }, function(data) {});
        },
        // all fields are required
        rules: {
            email2: {
                required: true,
                email: true
            }
        }
    });

    $(".sleva-popup").magnificPopup({
      items: {
        src: '<div class="white-popup">' +
        '<form id="sleva" action="/mail.php" method="post">'+
        '<input type="text" name="email2" id="email2" placeholder="Váše e-mailová adresa" style="padding: 6px;" />' +
        '<input type="submit" name="Submit" class="ziskej_slevu" value="Potvrdit"></div>' +
        '</form>' +
        '</div>',
        type: 'inline'
      },
      closeBtnInside: true
    });
});
</script>

工作：

<script type="text/javascript">
$(document).ready(function() {
    // jQuery Validation
    $("#sleva").validate({
        // if valid, post data via AJAX
        submitHandler: function(form) {
        $.post("/mail.php", { email: $("#email2").val(), sleva: "ano" }, function(data) {});
        },
        // all fields are required
        rules: {
            email2: {
                required: true,
                email: true
            }
        }
    });
});

$.magnificPopup.open({
  items: {
    src: '<div class="white-popup">' +
    '<form id="sleva" action="/mail.php" method="post">'+
    '<input type="text" name="email2" id="email2" placeholder="Váše e-mailová adresa" style="padding: 6px;" />' +
    '<input type="submit" name="Submit" class="ziskej_slevu" value="Potvrdit"></div>' +
    '</form>' +
    '</div>',
    type: 'inline'
  },
  closeBtnInside: true
});
</script>

【问题讨论】：

标签： javascript jquery ajax magnific-popup

【解决方案1】：

您需要在拨打您的$(".sleva-popup").magnificPopup({... 后拨打您的$("#sleva").validate({...。

当您的表单已经加载时，您的 document.ready 函数会在开始时对其进行验证。否则，您必须在在页面中插入表单之后手动执行此操作。

【讨论】：