jquery：处理2表单中的提交按钮而不刷新整个页面

Question

我正在构建一个包含2个提交按钮的表单，其中一个是“保存”，另一个是“删除”按钮。选择一个值并单击“保存”后，一切仍然正常，但是当单击“删除”按钮然后再次单击“保存”按钮时，“保存”按钮现在将用作“删除”按钮。按钮。请注意，我使用JQuery处理整个表单中的数据，以便不刷新整个页面。

以下是HTML表单：

    <div id="reload"> // using to reload this part after submit a form
    <!-- Select Item -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="itemID">Select menu item: </label>

            <div class="col-md-5">
                <select id="itemID" name="itemID" class="form-control" onchange="select_menu()">

                    <option value="0">--No selection--</option>
                    {{$data}}
                </select>
            </div>
        </div>

        <!-- Name input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="menuName">Menu name: </label>

            <div class="col-md-4">
                <input id="menuName" name="menuName" type="text" placeholder="(max 50 char)"
                       class="form-control input-md" required/>
            </div>
        </div>
        <!-- Link input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="link">Link URL: </label>

            <div class="col-md-4">
                <input id="link" name="link" type="text" placeholder="link URL"
                       class="form-control input-md">
            </div>
        </div>

        <!-- Select Parent -->
        <div class="form-group">
            <label class="col-md-4 control-label" for="parentID">Parent name: </label>

            <div class="col-md-5">
                <select id="parentID" name="parentID" class="form-control">
                    <option value="0">--No parent--</option>
                    {{$data}}
                </select>
            </div>
        </div>
</div> // end div 'reload'

        <!-- Save Button -->
                <button type="submit" id="btnSave" class="btn btn-primary" formaction="editmenu">Save changes
                </button>

        <!-- Delete Button -->
                <button type="submit" id="btnDelete" class="btn btn-danger" formaction="deletemenu">Delete
                    item
                </button>
Here is the Jquery process part:

    $('#btnSave').click(function () {
        var c = confirm("Are you sure?");
        if (c == true) {
            $('#editMenu').submit(function (e) {
                e.preventDefault();
                var editMenu = $('#editMenu').serializeArray();
                var url = $('#btnSave').attr('formaction');

                $.post(url, editMenu, function (data) {
                    if (data == 'fail') {
                        $('#fdk').show().addClass('alert alert-danger').fadeIn(2000);
                        $('#msg').text('Duplicate name');
                    }
                    if (data == 'pass') {
                        $.ajaxPrefilter(function (options, originalOptions, jqXHR) {
                            options.async = true;
                        });
                        $("#reload").load(document.URL + " #reload");
                        $('#fdk').show().addClass('alert alert-success').fadeIn(2000);
                        $('#msg').text('Changes saved');
                    }
                });
            });
        }
        else if (c == false) {
            return false;
        }
    });

    //    function delete_function() {
    $('#btnDelete').click(function () {
        var c = confirm("Are you sure you want to delete this item and all its children?");
        if (c == true) {
            $('#editMenu').submit(function (e) {
                e.preventDefault();
                var editMenu = $('#editMenu').serializeArray();
                var url = $('#btnDelete').attr('formaction');

                $.post(url, editMenu, function (data) {
                    if (data == 'fail') {
                        $('#fdk').show().addClass('alert alert-danger').fadeIn(2000);
                        $('#msg').text('Cannot delete. Try again later');
                    }
                    if (data == 'pass') {
                        $.ajaxPrefilter(function (options, originalOptions, jqXHR) {
                            options.async = true;
                        });
//reload a div part.
                        $("#reload").load(document.URL + " #reload");
//sucessfully message
                        $('#fdk').show().addClass('alert alert-success').fadeIn(2000);
                        $('#msg').text('Successfully deleted');
                    }
                });
            });
        } else if (c == false) {
            return false;
        }
    });
</script>