Question

所以我正在努力研究这个插件http://imakewebthings.com/waypoints/

的超薄文档

非常简单的东西，每当我的页脚出现时，我都会通过ajax获取新元素并附加它们。除非一个航点被击中一次，它就不会再次运行，我做错了什么？

        $('#footer').waypoint(function (direction) {
                   var $appender = $('.more_timeline').last();
            var data = {};
            var $wrapper = $('.container');
            var $yearwrapper = $wrapper.find('.year').last();
            data.current_year = $yearwrapper.find('.year_timeline').html();
            var $monthwrapper = $wrapper.find('.month').last();
            data.current_month = $monthwrapper.find('.month_timeline').attr('month-key');
            data.offset = $('.time_offset').last().attr('offset');

            console.log(data);

            $.ajax({
                type: 'post',
                data: data,
                url: 'jquery/wiki/extendtimeline',
                success: function (response) {
                    $appender.after(response);
                    $appender.hide();

                }
            });

        }, {
            offset: '100%'
        })

可以直播： http://kaboodle.io/u/calbert/timeline

Answer 1

Waypoint在您加载页面时保存页脚的位置。当你滚动到他的位置时（在第一个ajax调用上），航点的位置不会被重新计算。

您必须重新创建航点或每次到达时更新它并进行ajax呼叫..

事实上，你会看到，如果你第一次滚动，而不是返回首页并重新滚动前一个页脚位置，它将加载下一个内容。

尝试使用

$('#footer').waypoint('destroy') — Unregister waypoints and unbind all handlers.
$('#footer').waypoint('remove') — Unregister waypoints but leave handlers intact.

创建一个设置航点的功能和一个不设置它的功能。当你进行AJAX调用时，你只需要再次调用unsetter而不是set。一切都应该没问题。）

试试这个：

// JavaScript source code
var footer = $('#footer');
footer.waypoint(getNextFilms, {
    offset: '100%'
})

function getNextFilms(direction) {
    var $appender = $('.more_timeline').last();
    var data = {};
    var $wrapper = $('.container');
    var $yearwrapper = $wrapper.find('.year').last();
    data.current_year = $yearwrapper.find('.year_timeline').html();
    var $monthwrapper = $wrapper.find('.month').last();
    data.current_month = $monthwrapper.find('.month_timeline').attr('month-key');
    data.offset = $('.time_offset').last().attr('offset');

    console.log(data);

    $.ajax({
        type: 'post',
        data: data,
        url: 'jquery/wiki/extendtimeline',
        success: function (response) {
            $appender.after(response);
            $appender.hide();
            footer.waypoint('destroy');
            footer.waypoint(getNextFilms, {
                offset: '100%'
            })
        }
    });
}

重新初始化航点

1 个答案: