1

我有一个带有基本模板的 MVC 4 应用程序。在 _layout.cshtml 我有这个代码：

<script type="text/javascript">
        $(window).load(function () {
            $("body").on({
                // When ajaxStart is fired, add 'loading' to body class
                ajaxStart: function () {
                    $(this).addClass("loading");
                },
                // When ajaxStop is fired, remove 'loading' from body class
                ajaxStop: function () {
                    $(this).removeClass("loading");
                }
            });

            $("a").click(function () {
                $(this).addClass("loading");
            });
        });

    </script>

和相同的HTML：

<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
    <div class="modal"></div>
</body>

我创建了一个 HomeController，它只有 MVC 给出的代码。在索引视图中，我所拥有的是：

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<a href="#">some <span class="red">text</span></a>

我试图了解如何在跨应用程序发出链接或 ajax 请求时实现加载器。

从这里和这里得到了很多帮助。

上面的代码在点击链接时没有显示加载器，到目前为止还没有任何 ajax 调用。对于很多 jQuery 大师来说，这是一件非常简单的事情，但我很难理解使用 jQuery 的事件连接，所以我尝试用小步骤来学习。

有人可以指导我如何显示装载机并隐藏它吗？

感谢你的帮助。问候。

4

2 回答 2

0

如果 a 是动态创建的，则不能使用 click() 函数。试试这个

 $("a").on('click',function () {
            $(this).addClass("loading");
        });
于 2013-08-20T06:01:32.143 回答
0

试试这个，如果 a 不是动态创建的，如果 a 是在运行时创建的，那么需要在创建时绑定。

<script type="text/javascript">
    $(function () {
        $("body").on({
            // When ajaxStart is fired, add 'loading' to body class
            ajaxStart: function () {
                $(this).addClass("loading");
            },
            // When ajaxStop is fired, remove 'loading' from body class
            ajaxStop: function () {
                $(this).removeClass("loading");
            }
        });

        $("a").click(function () {
            $(this).addClass("loading");
        });
    });

</script>

演示

于 2013-08-20T05:49:20.153 回答