Кнопка позволяет нажать только один раз

Question

Я пытаюсь наложить контактную форму на веб-странице, но я завершил ее, однако, когда я нажимаю кнопку, я должен обновить sh экран, чтобы снова нажать на него, как я могу нажать на кнопку несколько раз, если я отменю окно и захочу вернуться в форму?

Редактировать: я добавил часть HTML, остальное - PHP mail и CSS код, который является правильным как сейчас. Я посмотрел на предложение protectDefault (), однако я не могу заставить его работать, все, что я получаю, - это не результат, а просто отказывает мне в доступе к моему всплывающему окну.

Любая помощь будет оценена.

<script>
$(document).ready(function () {
    $("#contact-icon").click(function () {
        $("#contact-popup").show();
    });
    //Contact Form validation on click event
    $("#contact-form").on("submit", function () {
        var valid = true;
        $(".info").html("");
        $("inputBox").removeClass("input-error");

        var userName = $("#userName").val();
        var userEmail = $("#userEmail").val();
        var subject = $("#subject").val();
        var message = $("#message").val();

        if (userName == "") {
            $("#userName-info").html("required.");
            $("#userName").addClass("input-error");
        }
        if (userEmail == "") {
            $("#userEmail-info").html("required.");
            $("#userEmail").addClass("input-error");
            valid = false;
        }
        if (!userEmail.match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/))
        {
            $("#userEmail-info").html("invalid.");
            $("#userEmail").addClass("input-error");
            valid = false;
        }

        if (subject == "") {
            $("#subject-info").html("required.");
            $("#subject").addClass("input-error");
            valid = false;
        }
        if (message == "") {
            $("#userMessage-info").html("required.");
            $("#message").addClass("input-error");
            valid = false;
        }
        return valid;

    });
});
</script>

<li><div id="contact-icon">
        <button id="buttoncontact"> Contact Me </button>
    </div></li>
<!--Contact Form-->
    <div id="contact-popup">
        <form class="contact-form" action="" id="contact-form"
            method="post" enctype="multipart/form-data">
            <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>
            <button id="closecontact">Close</button> </span>
            <h1>Contact Us</h1>
            <div>
                <div>
                    <label>Name: </label><span id="userName-info"
                        class="info"></span>
                </div>
                <div>
                    <input type="text" id="userName" name="userName"
                        class="inputBox" />
                </div>
            </div>
            <div>
                <div>
                    <label>Email: </label><span id="userEmail-info"
                        class="info"></span>
                </div>
                <div>
                    <input type="text" id="userEmail" name="userEmail"
                        class="inputBox" />
                </div>
            </div>
            <div>
                <div>
                    <label>Subject: </label><span id="subject-info"
                        class="info"></span>
                </div>
                <div>
                    <input type="text" id="subject" name="subject"
                        class="inputBox" />
                </div>
            </div>
            <div>
                <div>
                    <label>Message: </label><span id="userMessage-info"
                        class="info"></span>
                </div>
                <div>
                    <textarea id="message" name="message"
                        class="inputBox"></textarea>
                </div>
            </div>
            <div>
                <input type="submit" id="send" name="send" value="Send" />
            </div>
        </form>
    </div>

Answer 1

Вам нужно предоставить больше информации о вашем коде .... что работает, а что нет. Вы получаете какие-либо ошибки в консоли. Print screen .... пример jsfiddle или что-то в этом роде.

В настоящий момент я предполагаю, что ваш обработчик событий назначен кнопке во время события "готовность страницы". Когда вы открываете всплывающее окно ... оно повторно визуализирует html и временно удаляет вашу кнопку. Если вы отменили всплывающее окно ... ваша кнопка повторно добавляется на страницу ... но без прослушивателя событий.

Вы можете попробовать заменить

$("#contact-icon").click(function () {
    // Also, add console.log("contact icon clicked"); so u know the listener triggered.
    $("#contact-popup").show();
});
// with
$("#contact-icon").on("click", function () {
    $("#contact-popup").show();
});
// and see if it makes a difference.

I think your problem is that you remove the element when you close the popup. When you remove it...its gone. Instead of removing it...hide it.

Проверьте приведенный ниже пример https://jsfiddle.net/rainerpl/fgsc54dk/4/