Question

我已经看了很多论坛，试图让我的大脑尝试让这个超级简单的加载功能正常工作。我已将其缩小到我认为.fadeIn()函数loadContent部分的选择器问题。

我可以看到为什么它继续加载相同的东西，因为它使用相同的选择器，但基于我一直尝试使用的教程（http://css-tricks.com/rethinking-dynamic-page-replacing-content/）以及其他（甚至更多的破坏）我开始工作的方法（基于此：http://code.tutsplus.com/tutorials/how-to-load-in-and-animate-content-with-jquery--net-26），它似乎应该工作！

我尝试使用$(href)作为选择器，但它只是淡化旧内容并且不加载任何内容。我还尝试添加警报以查看href是什么，并返回正确的html页面，后跟正确的元素id（Articles / Cats.html #content）。

这是功能本身，如果您需要更多信息，我很乐意给它！任何帮助都会令人难以置信，非常有帮助！

function articleClickLoad () {
    if (Modernizr.history) {

        var newHash      = "",
            $Content     = $("#content"),
            $el;

        $("#content").on("click", "a", function() {

            var _link = $(this).attr("href");
            var toLoad = $(this).attr('href')+' #content';

            history.pushState(null, null, _link);
            loadContent(toLoad);
            return false;
        });

        function loadContent(href){

            $Content.find("#content");
            $Content.fadeOut(1000, function() {
                $("main").load(href,'', function() {
                    $Content.fadeIn(1000);
                });
            });
        }

        $(window).bind('popstate', function(){
           _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
           loadContent(toLoad);
        });
    }
}
articleClickLoad();

谢谢！

Answer 1

我看到两个潜在的问题。 .load采用网址~~，但出于某种原因，您在点击处理程序中添加了' #content';它应该被删除~~更新：我忽略了传递页面片段是完全有效的，忘掉了。

在loadContent方法中，您在选择器load上调用$("main")。从您的来源不清楚main可能是什么，但我认为它应该是#content。

另请注意，您可以从''来电中删除第二个参数.load。请参阅.load documentation。

Ajax调用加载当前内容

1 个答案: