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

乌aki木

我在为每个元素将函数附加到每个第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()成功调用的函数,而不是删除该函数,添加和删除一个类要容易得多。

鲁本·韦舒伦(Ruben Verschueren)

我要说的是先执行取消绑定,然后再执行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东西失败,您仍然可以使用原始功能

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

追加将最后一个附加值覆盖每个元素(Python)

如何使用 jquery 将类添加或附加到最后一个 li 元素

将一个列表的每个命名元素附加到另一个列表的相同命名元素

将张量附加到另一个张量的每个元素

内容可编辑Div,附加HTML导致问题。以编程方式附加HTML之后键入的每个文本都会添加到最后一个HTML标记中

如何将多维数组中的元素附加到另一个多维数组的每个元素

将多个子项附加到一个元素

jquery将多个元素附加到一个div

F#将Seq的每个元素分别附加到另一个,然后将一个函数应用于每个

新元素只附加到最后一个元素

将HTML元素推入数组以稍后将它们附加到一个div,该div也是动态创建的

在除bash数组的最后一个元素之外的每个元素上附加一个字符

添加内容未附加到最后一个输出

将三个数据属性之一附加到元素,但替换已附加的内容

动态地将一个 div 附加到另一个 div

如何将一个 std::queue 的内容附加到另一个

附加到Python中的列表:每次都添加最后一个元素吗?

将数据附加到另一个工作表的最后一行

将动态div附加到另一个先前动态创建的div中

将箭头功能附加到另一个箭头功能是不好的做法

Python For循环仅将最后一个值附加到列表中

将ID附加到div中的最后一个div

Python子进程将双引号附加到最后一个arg

通过单击最后一个元素在最后一个元素之后附加

如何将现有的 html 元素附加到另一个元素?

如何将一个值附加到列表中的每个元组?

从最后一个元素开始按顺序将class添加到元素的集合中

XSLT将嵌套元素添加到基于现有元素的最后一个节点

将每个元素附加到每个 div