Невозможно отправить форму с помощью AJAX внутри полномасштабного всплывающего окна

Question

Я представляю форму внутри модального (с плагином с увеличенным всплывающим окном), и у меня есть проблема. Я могу пропустить эту форму с помощью 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").validate({... после вы называете $(".sleva-popup").magnificPopup({....

Когда ваша форма уже загружена, функция document.ready проверяет ее в начале. В противном случае вам нужно сделать это вручную после вы введете форму на свою страницу.