Components on pages load from router

Questions
1

Hi.

  1. For example i create app use this template
    https://framework7io.github.io/framework7-template-vue-simple/

  2. And I insert
    http://framework7.io/docs/infinite-scroll.html
    into “ABOUT PAGE”

  3. How I can DELEGATE
    $$(’.infinite-scroll-content’).on(‘infinite’, function () {
    // Exit, if loading in progress

Because wherever I put that code, it doesn’t work.

(Except the main page - index.html)

2

Check how it is done in Vue Kitchen Sink https://github.com/framework7io/framework7/blob/master/kitchen-sink/vue/src/pages/infinite-scroll.vue

3

Ok, it i am understend, but how to delegate

I dynamically create elements (add new html code to page). Create it in cycle in my code into methods: {…

For Example this:
<a href="#" class=“button button-raised button-fill” @click=“loadMore”>Добавить

And @click=“loadMore” not work. (((

I can put to loadMore function to GLOBAL and get from this scope
app.methods.loadMore()

But I want past code on page where i use it (not ibdex)

thanks

4

If you add such elements dynamically it won’t work, because it is parsed on page init

5

it is very difficult to use in this case. I delegate Events int ROUTES.js
pageInit: function (e, page) {

But from this code, functions in the pages are not visible. From routes file not vosible scope in pages file

An easy way to call functions on dynamically added elements?

Pages have this code

return {
data: function () {
return {
allowInfinite: true,
lastItem: 1,
}
},
methods: {
…

How can add some code to delegate elements dynamically added?

Infinite add new elements but event on it dont work