使用 ajax 防止在导航时刷新页面

Question

我在一个 MVC 5 项目中工作，我想使用 ajax 更改我的内容

<script>


    $(document).ready(function () {

        window.onpopstate = function (e) {
            if (e.state) {
                $('.body-content').html(e.state.html);
                document.title = e.state.pageTitle;
            }
        };


        $("a").click(function (e) {
            e.preventDefault(); \\ currently placed here, but 
            var me = $(this);
            $('.body-content').fadeOut(300, function () {

                var url = "" + me.attr("href");

                if (!url || url.match("^http")) {
                    debugger;
                    return true;
                }
                if (!url || url === "/") {
                    url = "Home/Index";
                }
                $('.body-content').load(url, function () {

                    $('.body-content').fadeIn(300);
                    //window.history.pushState(
                    //    null,
                    //    'Terram Novum', // new page title
                    //    url// new url
                    //);
                });
                return false;
            });




        });

    });
</script>

这是我到目前为止写的代码，但有时它有时仍会刷新，我无法找出模式或原因。

代码放在 _layout.cshtml 页面中，我与模板没有太大变化。谁能帮助我或找出更好的方法来做到这一点？

哦，如果你能帮我弄清楚我什么时候从一个地区去到另一个地区，那就加分吧。

Answer 1

此代码仅适用于您的第一个页面加载，因为它被放置在 $(document).ready() 中，但随后，一旦您离开第一页并进入另一个带有链接的页面，您必须附加再次监听所有标签的事件监听器，因为它们最初并不存在。