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);
            }
        });
    });
});

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

1 个答案: