Почему форма никогда не отправляется с Jquery?

Question

Моя форма -

<form id="dataForm">

</form>

кнопка, на которую нажимают, -

<button id="btnAddSave" type="button">
    ButtonText
</button>

, а Jquery используется

$(document).ready(function () {
    $("#btnAddSave").click(function () {
        alert("1");
        $("#dataForm").submit(function (e) {
            alert("2");
            e.preventDefault();
            var form = $(this);

            var url = "/save";

            $.ajax({
                type: "POST",
                url: url,
                data: form.serialize(),
                success: function (data) {
                    alert(data);
                }
            });
        });
    })
});

В приведенном выше примере отображается первое предупреждение, но не второе. Что здесь происходит не так? Как я могу это исправить?

Answer 1

Почему вы связываете два обработчика событий друг с другом? Go с .click или .submit, нет необходимости в обоих. Сам код должен работать.

Answer 2

Как я уже упоминал в комментарии, это рабочий пример:

$(document).ready(function () {
    $("#btnAddSave").click(function () {
        alert("1");
            alert("2");
            e.preventDefault();
            var form = $("#dataForm").serialize();

            var url = "/save";

            $.ajax({
                type: "POST",
                url: url,
                data: form,
                success: function (data) {
                    alert(data);
                }
            });
    })
});

Answer 3

Как обсуждалось в комментариях, обработчик отправки не запускается, потому что он подключается при срабатывании обработчика щелчка. Вы можете просто удалить весь код отправки как таковой:

$(document).ready(function () {
    $("#btnAddSave").click(function () {
        alert("1");
        alert("2");

        // e.preventDefault(); -> this does nothinng for a button type button
        var form = $("#dataForm");

        var url = "/save";

        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(),
            success: function (data) {
                alert(data);
            }
        });
    })
});