Question

这是我的模态：

<script>
    $(document).ready(function () {
        $(document).on("submit","#modal",function (e) {
            e.preventDefault();
            var form_data = $(this).serialize();
            $.ajax({
                url: "@Url.Action("SaveRole", @ViewContext.RouteData.Values["controller"].ToString())",
                method: "POST",
                data: form_data,
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success: function (result) {
                    if (result.success) {
                        $(document).off("submit");
                        $("#close").trigger("click");
                        return;
                    }
                    $.each(result.errors, function (index, item) {
                        // Get message placeholder
                        var element = $('[data-valmsg-for="' + item.propertyName + '"]');
                        element.empty();
                        // Update message
                        element.append($('<span></span>').text(item.errorMessage));
                        // Update class names
                        element.removeClass('field-validation-valid').addClass('field-validation-error');
                        $('#' + item.propertyName).removeClass('valid').addClass('input-validation-error');
                    });
                }
            });
            return false;
        });
    });
</script>
<div class="col-sm-12">
    @if (Model.Id == null)
    {
        <h2>Add Role</h2>
    }
    else
    {
        <h2>Edit Role</h2>
    }
    <hr />
</div>
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "modal" }))
{
    @Html.AntiForgeryToken()
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    @Html.HiddenFor(m => m.Id)
                    @Html.HiddenFor(m => m.ApplicationId)
                    @Html.LabelFor(m => m.RoleName)
                    @Html.TextBoxFor(m => m.RoleName, new { @class = "form-control col-sm-12" })
                    @Html.ValidationMessageFor(m => m.RoleName)
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <div class="clearfix">
                        <div class="pull-right">
                            <input type="submit" id="save" value="Save" class="btn btn-primary" />
                            <a href="#" id="close" class="btn btn-outline-secondary" rel="modal:close">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

发生的事情是，当我以这种方式提交表单时，它在关闭时会填充一个表格。但是，当我打开模式并立即将其关闭时，再次将其打开并提交表单，表中将填充2个条目。我试图删除模式中的click事件处理程序，但仍然会发生。

这是模态关闭时的操作：

$(document).off($.modal.AFTER_CLOSE);
$(document).on($.modal.AFTER_CLOSE, function (event, modal) {
    table.draw();
    $("#modal").empty();
    $("#modal").off();
    $("#model").dialog('destroy');
});

我想念什么吗？

编辑：

这是我打开模态的方式：

@Html.ActionLink("Add", "RoleDetails", @ViewContext.RouteData.Values["controller"].ToString(), new { Id = "", ApplicationId = Model.Id }, new { @class = "btn btn-primary", @rel = "modal:open" })

EDIT2：

我检查了我的按钮是否有点击，但是即使在提交之前关闭了模式，也没有显示点击事件：

if (buttonEvent && buttonEvent.click) {
   console.log("Has Click Event");
} else {
   console.log("No Click Event");
}

jQuery Modal在关闭并重新打开时导致双重触发

0 个答案: