Why is AJAX form submission not working?

Question

PHP

I can't figure out where the error is, there are two forms, one works with AJAX submission and the other doesn't. Although the script itself is the same.

Here is the code
Working form

<div class="col-md-6">

        <div class="form-block-home-security">
            <form id="security-form" name="security-form" method="post" action="" data-dpmaxz-eid="14">
                <input class="security-form-input" type="text" name="first_name" maxlength="50" size="30" placeholder="Ваше имя" data-dpmaxz-eid="15">
                <input class="security-form-input" type="text" name="telephone" maxlength="30" size="30" placeholder="Номер телефона" data-dpmaxz-eid="17">
                <div id="answer" class="answer-security-form"></div>
                <button class="security-form-submit" type="submit" value="Submit" data-dpmaxz-eid="19">Отправить </button>
            </form>
        </div>
    </div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/JavaScript">
    $(document).ready(function() {
        $("#security-form").submit(function(event) {
            event.preventDefault();
            $.ajax({
                url: "/api/contact.php",
                beforeSend: function() {
                    $("#load").fadeIn(400);
                },
                type: "post",
                data: $("#security-form").serialize(),
                success: function(answer) {
                    $("#answer").html(answer);
                }
            }).done(function() {
                $("#load").fadeOut(400);
            });
        });
    });
</script>

not working form

<form class="contact-form" name="contact-form" method="post" action="">
                <table>
                    <tr>
                        <td valign="top">
                            <input class="contact-form-input" type="text" name="first_name" maxlength="50" size="30" placeholder="ФИО:">
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            <input class="contact-form-input" type="text" name="email" maxlength="80" size="30" placeholder="E-mail:">
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            <input class="contact-form-input" type="text" name="telephone" maxlength="30" size="30" placeholder="Телефон:">
                        </td>
                    </tr>
                    <tr>
                        <td valign="top">
                            <textarea class="contact-form-input" name="comments" maxlength="1000" cols="25" rows="6" placeholder="Комментарий:"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align:center">
                            <div id="answer"></div>
                            <button class="contact-form-submit" type="submit" value="Submit">Отправить <img src="/wp-content/themes/wp-bootstrap-starter/inc/image/Icon-submit.png"></button></a>
                        </td>
                    </tr>
                </table>
            </form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

            <script type="text/JavaScript">
                $(document).ready(function() {
                    $("#contact-form").submit(function(event) {
                        event.preventDefault();
                        $.ajax({
                            url: "/api/contact.php",
                            beforeSend: function() {
                                $("#load").fadeIn(400);
                            },
                            type: "POST",
                            data: $("#contact-form").serialize(),
                            success: function(answer) {
                                $("#answer").html(answer);
                            }
                        }).done(function() {
                            $("#load").fadeOut(400);
                        });
                    });
                });
            </script>

Answer 1

1. Open the console, check if there are any errors
2. Make sure that the form id is unique on the page, maybe it just works on another element
3. Check if js finds the form by the selector, for example, output something to the console:

$("#contact-form").submit(function(event) {
                        event.preventDefault();
console.log('Да я сработала');
}):

Answer 2

Probably a bug in the console