Question

我无法将函数附加到每个元素的每个第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调用。

为了使其正常工作，我需要取消绑定最后一个元素的事件并将事件绑定到 new 最后一个元素，我希望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调用之后和最后一个元素未绑定之后重新计算哪个是的最后一个元素。< / p>

帮助表示赞赏。

修改：ANSWER

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()而不是删除函数，只需添加和删除类就更容易了。

Answer 1

我说首先执行unbind，然后你做ajax的东西，最后再绑定它。为了实现将'inview'功能分开并将其称为x可能更容易，那么你可以这样做：

$this.unbind('inview');
$.ajax({
   dataType: "HTML",
   url: ajax_url,
    type: 'POST',
    data: {
       action: 'side_scroll'
     },
      success: function (data) {
           $('#sglsPosts nav').append(data);
           $('.sglsPostContainer:last-child').on('inview', FUNCTION_X_NAME);
       }
  });

虽然没有测试过这个..

编辑：更好的方法是在ajax调用成功时解除绑定/重新绑定。这样，如果ajax失败，你仍然拥有原始功能

将函数附加到动态内容的每个最后元素

1 个答案: