Почему перезагружается страница при отправки формы?

Question

[d_h_o_l]

Есть обработчик формы, для того чтобы она не перезагружалось добавлено return false; в конце

$("#form-ingress").submit(function () {
    var login = $("#login-ingress").val();
    var password =$("#ingress-password").val();
    if(login != "" && password!=""){
        Ingress(login,password);
    }
    return false;
});

если форма изначально находится на странице html, то все хорошо, страница не перезагружается,
но если форма в dom дерево добавлена через js следующим кодом:

function ingressOpen (){
    $('#ingress').html(
        '                <form id="form-ingress" action="" class="form-horizontal">\n' +
        '                    <div class="good_z"></div>\n' +
        '                    <label class="sr-only" for="login-ingress">Ваш логин</label>\n' +
        '                    <div class="input-group mb-2">\n' +
        '                        <div class="input-group-prepend">\n' +
        '                            <div class="input-group-text"><i class="fas fa-user "></i></div>\n' +
        '                        </div>\n' +
        '                        <input type="text" name="login" required class="form-control" id="login-ingress"\n' +
        '                               placeholder="Ваш логин">\n' +
        '                    </div>\n' +
        '                    <label class="sr-only" for="login-password">Пароль</label>\n' +
        '                    <div class="input-group mb-2">\n' +
        '                        <div class="input-group-prepend">\n' +
        '                            <div class="input-group-text"><i class="fas fa-key fa-flip-horizontal"></i></div>\n' +
        '                        </div>\n' +
        '                        <input type="password" name="password" required class="form-control" id="ingress-password"\n' +
        '                               placeholder="Пароль">\n' +
        '                    </div>\n' +
        '                    <button class="btn btn-success center-block" type="submit">\n' +
        '                        Войти\n' +
        '                    </button>\n' +
        '                </form>\n'
    )
}

то по нажатию на submit кнопку происходит перезагрузка, как это предотвратить?

Answer 1

[Ilya Loginov]

Событие submit не сработает т.к. вы сначала вешаете обработчики на элементы, а затем создаете новый элемент не добавляете ему событие. Вешайте обработчик на весь документ, и фильтруйте элементы:

$(document).on("submit", "#form-ingress",function() {
...
});

Answer 2

[Mors Clamor]

onclick="event.preventDefault()" в <form> отменит действие по умолчанию (отправка формы) и рулите в скрипте