替换内容时卸载的文档事件

Question

我正在尝试添加加载动画以在应用程序执行一些长时间操作时呈现给用户，目前正在使用登录屏幕进行测试。
为了呈现动作返回的 HTML，我使用了一篇文章中的代码，该文章展示了如何使用 IRazorViewEngine 和 ITempDataProvider 将视图呈现为字符串。我还使用在不同站点中找到的一些代码来处理 AJAX 请求开始/结束时的加载动画：

//inside form:
<button type="button" id="btnLogin" class="btn btn-default">
//below form:
@section Scripts{
    <script type="text/javascript">
        $(function ()
        {
            $body = $("body");

            $(document).on({
                ajaxStart: function () { $body.addClass("loading"); },
                ajaxStop: function () { $body.removeClass("loading"); }
            }); 

            $("#btnLogin").on("click", function (e)
            {
                var form = $("#loginForm");
                $.ajax({
                    cache: false,
                    async: true,
                    type: "POST",
                    url: form.attr('action'),
                    data: form.serialize(),
                    success: function (data)
                    {
                        $("#myDIV").html(data.viewResult);
                    }
               });
            });
        });
    </script>
}

myDiv 是一个简单的 div 元素，它包裹了整个视图。一切都很好，但是在替换所有 div 后尝试执行第二个 AJAX 请求（由于凭据无效导致登录失败）时，按钮什么也不做。 我必须在 jQuery 代码中修改什么才能使其工作？我是否必须将视图放在局部视图中并将代码作为父级的一部分并让子级托管表单？

Answer 1

您正在替换按钮，因此您必须使用委托事件处理程序

$(function() {
    $body = $("body");

    $(document).on({
        ajaxStart: function() {
            $body.addClass("loading");
        },
        ajaxStop: function() {
            $body.removeClass("loading");
        }
    });

    $("#myDIV").on("click", "#btnLogin",  function(e) {
        var form = $("#loginForm");
        $.ajax({
            type: "POST",
            url: form.attr('action'),
            data: form.serialize(),
            success: function(data) {
                $("#myDIV").html(data.viewResult);
            }
        });
    });
});