重新初始化航点 [英] Reinitialize waypoint

问题描述

因此，我正在尝试处理此插件的超薄文档 http://imakewebthings.com/waypoints/

So I'm trying to work on the super thin documentation of this plugin http://imakewebthings.com/waypoints/

很简单的东西，每次我的页脚出现时，我都通过ajax获取新元素并追加它们.除非一次击中某个路标，否则它将不会再次运行，我在做什么错了?

Pretty simple stuff, everytime my footer is in view, I fetch new elements via ajax and append them. Except once a waypoint has been hit once, it won't run again, what am I doing wrong?

        $('#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

推荐答案

Waypoint会在加载页面时保存页脚的位置.当您滚动到航点的位置(在第一个ajax调用中)时，不会重新计算该航点的位置.

Waypoint save the position of your footer when you load the page. The position of the waypoint isn't recalculated when you scrolled to his position (on the first ajax call).

每次到达它并进行ajax调用时，您将不得不重新创建或更新航路点.

You will have to recreate the waypoint or update it each time you reach it and you make your ajax Call..

实际上，您将看到，如果先滚动，则返回首页并在上一个页脚位置重新滚动，它将加载下一个内容.

In fact, you will see that, if you first scroll, than return to top page and rescroll on the previous footer position, it will load the next content.

尝试使用

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

设置一个设置航路点和取消设置航路点的功能. 当您进行AJAX呼叫时，您只需要呼叫取消设定者，然后再呼叫设定者即可.一切都应该没问题:)

Make a function that set the waypoint and one that unsetter it. When you do your AJAX call, you just have to call the unsetter and than the set again. and all should be fine :)

尝试:

// 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%'
            })
        }
    });
}

这篇关于重新初始化航点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！