javascript - 无法在放大的弹出窗口内使用 AJAX 提交表单

Question

我正在模态中提交表单(使用 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>

Answer 1

在调用 $(".sleva-popup").magnificPopup({. ...

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