Can't submit form with AJAX inside of a magnific popup

Question

I am submitting a form inside of a modal (made with magnific-popup plugin) and I have a problem. I can sumbit this form with AJAX when the popup is displayed everytime the page is loaded. But if I want to load modal after click on button, I can't submit it with AJAX. There is a working and not-working code sample. There are just small differences.

NOT-Working:

<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>

Working:

<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

You need to call your $("#sleva").validate({... after you call your $(".sleva-popup").magnificPopup({....

When your form is already loaded, you document.ready function validates it at the beginning. Otherwise, you have to do it manually after you insert the form in your page.