F7 V2 infinity scroll problem

hello,

I tried make infinity scroll, like it says in docs
https://framework7.io/docs/infinite-scroll.html

but as a result - I can see preloader, but I can’t get infinity callback

here is html:
<div class=“page”>
<div class=“page-content”>
<!–some code–>
<div class=“section”>
<!–some code–>
<div id=“membersWrp” class=“infinite-scroll-content membersWrp” @infinite=“loadMore”>
<div class=“wrp-container”>
<!–infinity elements–>
</div>
<div class=“preloader infinite-scroll-preloader”>
</div>
</div>
</div>
</div>

and here is js function:
$$(’.infinite-scroll-content’).on(‘infinite’, function () {

app.dialog.alert(‘test’);

});

What am I missing?
Thnx

Do you have a live example or JSFiddle with the issue?

here is html (better switch browser in responsive mode):
http://dailybmw.ru/aquaTherm/#!/members/

and here is js:
http://dailybmw.ru/aquaTherm/js/bundle.js

infinity callback is on 160 line.
loadMore function is on 166 line

It shouldn’t add new elements, it should just show test alert.

Great thnx for help

Your infinite scroll handler i bundle.js is not attached to any page and being initialized when there is no “. infinite-scroll-content” in DOM, so it won’t work. Add this handler within pageInit event (recommended) for required page or make it global like:

$(document).on('infinite', function () {
  //...
});

oh, thnx.
But there was some more problems:

  1. In v2 is new attribute data-infinite-distance, not data-distance
  2. infinite-scroll-content class should be added to page-content class

Now it works.
Great thanks!