Infinite scroll event not firing

I have an infinite scroll in a page

<div data-name="post" id='post' class="page">
    <div class="navbar">...</div>
    <div class='page-content infinite-scroll-content ptr-content' data-ptr-distance="55">...</div>
</div>

In pageInit I try to bind the infinite event:

$$('#post .infinite-scroll-content').off('infinite').on('infinite', function () {
    console.log('INFINITE');
});

On a different page the infinite scroll is working perfectly finde, on this page the event is never triggered.
Does anybody have an idea what might go wrong here?

Do you have both pages with same “post” id?

I checked that already,

console.log($$('#post .infinite-scroll-content').length);

returns 1. So there are no other occurences on the page.

It should always return 1 because there is # in selector which means the unique element

And why do you do off/on instead of just on?

I checked that with a unique class name again and it returns still 1.

I guess that’s pretty unnecessary in this case, your’re right. I removed the off part, but still no success.

Ok, anyway, if you do it inside of pageInit event then it is better to do it in this way:

page.$el.find('.infinite-scroll-content').on('infinite', function () {
  console.log('INFINITE');
});

where page is the page data object returned in event

Thanks, good to know! Unfortunately this didn’t fix the infinite scroll either…:confused:

The problem is somewhere else, I suspect that you added this infinite-scroll-content element it class after page init so it doesn’t trigger infinite event