Javascript Ajax滚动以加载运行函数但不加载内容的帖子项目

我的剧本有问题。我想做的是首先点击按钮在视图中拉一个新的帖子，然后进入视图，然后重置原来的容器（这是可行的）

我面临的问题是当我想加载在滚动条上发布内容（自定义字段）时。我的脚本似乎正在运行，但加载帖子内容时出现问题。请参阅下面的代码

HTML: post-one.html

<div id="default" class="main">
    <div id="imageContainer" style="background:url(images/bg.jpg) no-repeat center center; background-size:cover;">
        <a href="http://www.example.com/next-post" class="button"></a>
    </div>
    <div id="introContentContainer" class="content">
        <div class="postContent-1 post">
            <h1>heading</h1>
            <p>paragraph.</p>
        </div>
    </div>
    <div id="postContentContainer" class="content"></div>
</div>

<div id="load" class="direction"></div>

标题
段落

HTML: next-post.html

<div id="default" class="main">
    <div id="imageContainer" style="background:url(images/bg2.jpg) no-repeat center center; background-size:cover;">
        <a href="http://www.example.com/post-one" class="button"></a>
    </div>
    <div id="introContentContainer" class="content">
        <div class="postContent-1 post">
            <h1>heading</h1>
            <p>paragraph.</p>
        </div>
    </div>
    <div id="postContentContainer" class="content">
        <div class="postContent-2 post">
            <h2>Content Two</h2>
            <p>para 2</p>
        </div>
        <div class="postContent-3 post">
             <h2>Content Three</h2>
             <p>para 3</p>
        </div>
        <div class="postContent-4 post">
            <h2>Content Four</h2>
            <p>para 4</p>
        </div>
    </div>
</div>

<div id="load" class="direction"></div>

标题
段落

内容二
第2段

内容三
第3段

内容四
第4段

JQUERY：

var processing;
var count = 0;

$(document).ready(function(){
    $.ajaxSetup({cache:false});

    $('body').on('click', 'a', function(e){
        e.preventDefault();
        var self = this;
        history.pushState({ path: this.path }, '', this.href);
        history.replaceState({ path: this.path }, '', this.href);
        RightSlide(self);           
        return false;
    });

    function RightSlide(self) {

        //Unbind Scroll Event
        $(window).unbind('scroll');
        console.log('unbind scroll');

        // Get next link URL
        var post_id = $(self).attr('href');

        // Load new top content in offset slide
        $.get(post_id, {}, function(data) {
            var $response = $('<div />').html(data);
            var $image = $response.find('#imageContainer')
            var $content = $response.find('#introContentContainer')
            $('.direction').append($image).append($content);;
            setTimeout(function(){$('.direction').show('slide',{direction: 'right', easing: 'easeOutCubic'}, 600);$('.main').hide('slide', { direction: 'left', easing: 'easeOutCubic' }, 600);},100);
            setTimeout(function(){
                // Reset slider                 
                if($('#default').hasClass('main')) {
                    $('#default').addClass('direction').removeClass('main');
                } else {
                    $('#default').addClass('main').removeClass('direction');
                }
                if($('#load').hasClass('main')) {
                    $('#load').addClass('direction').removeClass('main');   
                } else {
                    $('#load').addClass('main').removeClass('direction');
                }
                $('.direction').empty().hide();
                $('.disableClicks').hide();
            },700);
            setScroll();
            console.log('bind scroll');
            return false;
        },'html');
    };

    function setScroll() {
        $(document).bind('scroll', function(e){
            if (processing)
                return false;
            if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10){
                processing = true;
                console.log('the function is processing ' + processing);
                getResults();
            }
        }); 
    }

    function getResults() {
        var url = window.location.href;
        console.log(url);
        $('#postContentContainer').load(url + ' .postContent-2', function(){
            count++;
            console.log('why doesnt this run!');
            return false;
        });
        console.log('run scroll function');
        processing = false; 
    }

var处理；
var计数=0；
$（文档）.ready（函数（）{
$.ajaxSetup（{cache:false}）；
$（'body'）。在（'click'，'a'，函数（e）上{
e、 预防默认值（）；
var self=这个；
pushState（{path:this.path}'，this.href）；
replaceState（{path:this.path}'，this.href）；
右滑（自身）；
返回false；
});
功能右滑块（自身）{
//解除绑定滚动事件
$（窗口）。解除绑定（“滚动”）；
log（'unbind scroll'）；
//获取下一个链接URL
var post_id=$（self.attr（'href'）；
//在偏移幻灯片中加载新的顶部内容
$.get（post_id，{}，函数（数据）{
var$response=$（''）.html（数据）；
var$image=$response.find（“#imageContainer”）
var$content=$response.find（“#introContentContainer”）
$（'.direction'）.append（$image）.append（$content）；；
setTimeout（function（）{$（'.direction'）.show（$slide'，{direction:'right'，easeOutCubic'}，600）；$（'.main'）.hide（$slide'，{direction:'left'，easeOutCubic'}，600）；}，100）；
setTimeout（函数（）{
//复位滑块
if（$（'#default'）.hasClass（'main'））{
$（'#default'）.addClass（'direction'）.removeClass（'main'）；
}否则{
$（'#default'）.addClass（'main'）.removeClass（'direction'）；
}
if（$（'#load'）.hasClass（'main'））{
$（'#load'）.addClass（'direction'）.removeClass（'main'）；
}否则{
$（'#load'）.addClass（'main'）.removeClass（'direction'）；
}
$（'.direction'）.empty（）.hide（）；
$（'.disableClicks'）.hide（）；
},700);
setScroll（）；
log（'bind scroll'）；
返回false；
}，'html'）；
};
函数setScroll（）{
$（文档）.bind（'scroll'，函数（e）{
如果（处理）
返回false；
if（$（窗口）.scrollTop（）>=$（文档）.height（）-$（窗口）.height（）-10）{
处理=真；
console.log（'函数正在处理'+处理）；
getResults（）；
}
}); 
}
函数getResults（）{
var url=window.location.href；
console.log（url）；
$（'#postContentContainer'）.load（url+'.postContent-2'，函数（）{
计数++；
log（'为什么不运行它！'）；
返回false；
});
log（'run scroll function'）；
处理=假；
}

以下是到目前为止的步骤概述：

1） 单击按钮，加载新的发布视图

2） 滑入视口，滑出旧容器并重置类

3） 在滚动上获取新页面post div“.postContent-2”（最终将是动态的），但此操作失败

有人知道为什么这不起作用吗？有人能帮助解决吗

谢谢

安德鲁

成功了

将我的getResults函数更改为

function getResults() {
    var url = window.location.href;
        console.log(url);

        $.ajax({
            url : url,
            type: 'GET',
            success: function(data) {

            var html = jQuery('<div>').html(data);
            var $newcontent = html.find('.postContent-2');

            $('#introContentContainer').append($newcontent);
            console.log('this now runs!');
            return false;
        }
    });

    console.log('run scroll function');
    processing = false; 
}

函数getResults（）{
var url=window.location.href；
console.log（url）；
$.ajax({
url:url，
键入：“GET”，
成功：功能（数据）{
var html=jQuery（“”）.html（数据）；
var$newcontent=html.find（'.postContent-2'）；
$（'#introContentContainer'）。追加（$newcontent）；
log（'现在运行！'）；
返回false；
}
});
log（'run scroll function'）；
处理=假；
}

为什么要这样加载div内容？据我所知，该div属于页面本身。您不能执行$（'#postContentContainer”）.html（$（“.postContent-2”）？该div属于我要获取的内容，使用.html（）不提取内容，因为初始页面中未填充任何内容。但是，使用代码，您将获得正在查看的页面。您不会获得包含新帖子的页面。在按钮上单击它将使用历史推送状态更改url，告知浏览器字符串已更改，但页面未重新加载，因此.load（）正在尝试从新更改的url（下一篇文章）中提取内容。此$（“#postContentContainer”）.load（'example.com/new post'+'.postContent-2'，function（）{我不确定这是否会是一个问题，但仔细查看代码，您忘记关闭div标记”“…可能是它导致.load函数在解析html时出现问题。