jquery $.ajax 多次发布（每次后续提交后额外发布一次）

Question

在我忘记密码的表单上，jquery ajax 帖子被触发了多次（每次提交后又触发了一次）。因此，如果用户输入了 3 次无效的电子邮件，然后输入了有效的电子邮件，则用户会收到 4 封更改密码的电子邮件。似乎每次抛出错误时事件都会堆积起来，并且所有这些都会在下一次提交时被触发。这是我所有的相关代码。我做错了什么？

JS

 RetrievePassword = function () {
        var $popup = $("#fancybox-outer");
        var form = $popup.find("form");
        form.submit(function (e) {
            var data = form.serialize();
            var url = form.attr('action');
            $.ajax({
                type: "POST",
                url: url,
                data: data,
                dataType: "json",
                success: function (response) {
                    ShowMessageBar(response.Message);
                    $.fancybox.close()
                },
                error: function (xhr, status, error) {
                    ShowMessageBar(xhr.statusText);
                }
            });
            return false;
        });    
    };

MVC 控制器/动作

[HandlerErrorWithAjaxFilter, HttpPost]
        public ActionResult RetrievePassword(string email)
        {
            User user = _userRepository.GetByEmail(email);

            if (user == null)
                throw new ClientException("The email you entered does not exist in our system.  Please enter the email address you used to sign up.");

            string randomString = SecurityHelper.GenerateRandomString();
            user.Password = SecurityHelper.GetMD5Bytes(randomString);
            _userRepository.Save();

            EmailHelper.SendPasswordByEmail(randomString);

            if (Request.IsAjaxRequest())
                return Json(new JsonAuth { Success = true, Message = "Your password was reset successfully. We've emailed you your new password.", ReturnUrl = "/Home/" });
            else
                return View();           
        }

HandlerErrorWithAjaxFilter

public class HandleErrorWithAjaxFilter : HandleErrorAttribute
    {
        public bool ShowStackTraceIfNotDebug { get; set; }
        public string ErrorMessage { get; set; }

        public override void OnException(ExceptionContext filterContext)
        {
            if (filterContext.HttpContext.Request.IsAjaxRequest())
            {
                var content = ShowStackTraceIfNotDebug || filterContext.HttpContext.IsDebuggingEnabled ? filterContext.Exception.StackTrace : string.Empty;
                filterContext.Result = new ContentResult
                {
                    ContentType = "text/plain",
                    Content = content
                };

                string message = string.Empty;
                if (!filterContext.Controller.ViewData.ModelState.IsValid)
                    message = GetModeStateErrorMessage(filterContext);
                else if (filterContext.Exception is ClientException)
                    message = filterContext.Exception.Message.Replace("\r", " ").Replace("\n", " ");
                else if (!string.IsNullOrEmpty(ErrorMessage))
                    message = ErrorMessage;
                else
                    message = "An error occured while attemting to perform the last action.  Sorry for the inconvenience.";

                filterContext.HttpContext.Response.Status = "500 " + message;
                filterContext.ExceptionHandled = true;
                filterContext.HttpContext.Response.TrySkipIisCustomErrors = true;
            }
            else
            {
                base.OnException(filterContext);
            }
        }

        private string GetModeStateErrorMessage(ExceptionContext filterContext)
        {
            string errorMessage = string.Empty;
            foreach (var key in filterContext.Controller.ViewData.ModelState.Keys)
            {
                var error = filterContext.Controller.ViewData.ModelState[key].Errors.FirstOrDefault();
                if (error != null)
                {
                    if (string.IsNullOrEmpty(errorMessage))
                        errorMessage = error.ErrorMessage;
                    else
                        errorMessage = string.Format("{0}, {1}", errorMessage, error.ErrorMessage);
                }
            }

            return errorMessage;
        }

    }

这里有更多的 JS。我正在使用 fancybox 插件作为我的灯箱。找回密码链接位于登录灯箱上。

$(document).ready(function () {

    $(".login").fancybox({
        'hideOnContentClick': false,
        'titleShow': false,
        'onComplete': function () {       

            $("#signup").fancybox({
                'hideOnContentClick': false,
                'titleShow':false,
                'onComplete': function () {

                }
            });

            $("#retrievepassword").fancybox({
                'hideOnContentClick': false,
                'titleShow': false,
                'onComplete': function () {

                }
            });
        }
    });  

});

Answer 1

我不是 jQuery 专家，但在我看来，每次fancybox onComplete 触发时，您都会向 #retrievepassword 和 #signup 添加（另一个）事件处理程序...我错过了 html 中的其余部分该页面，所以我不知道是否/何时加载登录对话框内容，但以下可能会更好：

$(document).ready(function () {

    $(".login").fancybox({
        'hideOnContentClick': false,
        'titleShow': false,
        'onComplete': function () {       

        }
    }); 

    $("#signup").fancybox({
        'hideOnContentClick': false,
        'titleShow':false,
        'onComplete': function () {

        }
    });

    $("#retrievepassword").fancybox({
        'hideOnContentClick': false,
        'titleShow': false,
        'onComplete': function () {

         }
    });
});