将功能附加到动态内容的每个最后一个元素

我在为每个元素将函数附加到每个第n个元素时遇到麻烦。

这个想法是每当最后一个元素出现时触发ajax调用。我正在使用一个方便的名为inview的jquery插件。

我列出了10个帖子，结构如下：

的HTML

<div id="sglsPosts">
    <nav>
        <div class="sglsPostContainer"></div>
        <div class="sglsPostContainer"></div>
        <div class="sglsPostContainer"></div>
        <div class="sglsPostContainer"></div>
        <div class="sglsPostContainer"></div>
        <div class="sglsPostContainer"></div>
    </nav>
</div>

起初，我试图用类似的方法进行此操作，$('div nav > div:nth-child(10n)')但后来认为没有必要，因为我想要的只是最后一个元素，所以我最终使用了：var elem = $('.sglsPostContainer:last-child');

然后，我想通过ajax调用在加载更多和之前和之后将函数附加到最后一个元素。

我知道使用jQuery.on();是将功能应用于动态内容所应使用的功能，并且我只想执行一次功能，因此我从以下内容开始：

jQuery的

var elem = $('.sglsPostContainer:last-child');
elem.on('inview', function () {
    var $this = $(this);
    $this.one('inview', function (event, isInView) {
        if (isInView) {
            console.log('hello');
            $this.unbind('inview');
        }
    });
});

到目前为止，一切似乎很好，现在可以添加ajax内容。

我将调用10个帖子并将它们附加到$('#sglsPosts nav')，然后每当最后一个元素出现时，我都想再次触发ajax调用。

对于这个正常工作，我需要解除绑定该事件是最后一个元素，并结合该事件，以新的最后一个元素，我希望jQuery.one();并$this.unbind('inview');会照顾这一点，但可惜我在这里。

jQuery的

var elem = $('.sglsPostContainer:last-child');
elem.on('inview', function () {
    var $this = $(this);
    $this.one('inview', function (event, isInView) {
        if (isInView) {
            console.log('hello');
            $.ajax({
                dataType: "HTML",
                url: ajax_url,
                type: 'POST',
                data: {
                    action: 'side_scroll'
                },
                success: function (data) {
                    $('#sglsPosts nav').append(data);
                }
            });
            $this.unbind('inview');
        }
    });
});

这只是触发事件一次，可能是因为我有绑定的情况下，我想我需要重新计算这又是最后一个元素后， Ajax调用和之后的最后一个要素是自由的。

帮助表示赞赏。

编辑：答案。

function nth_view() {
    var elem = $('.sglsPostContainer:last-child');
    elem.addClass('nth');
}
nth_view();

var offset = 1;
$('.nth').live('inview', function () {
    var $this = $(this);
    if ($this.hasClass('nth')) {
        $this.removeClass('nth');
        var ajax_url = $('#sglsPosts').attr('data-url');
        offset = parseInt(offset) + 10;
        $.ajax({
            dataType: "HTML",
            url: ajax_url,
            type: 'POST',
            data: {
                action: 'side_scroll',
                offset: offset
            },
            success: function (data) {
                $('#sglsPosts nav').append(data);
                nth_view();
            }
        });
    }
});
});

这里最主要的是nth_view()成功调用的函数，而不是删除该函数，添加和删除一个类要容易得多。