[SOLVED] [v2.3.1 ] Back event fired twice

1

Hi Vladimir, is there any way I can handle while the “back” event is being fired?

Version: 2.3.1
Vanilla JS

Steps:
1- I click on a page1, opens page2, click on back , and it’s OK
2-Then I open2 again, with different content data, click on back , and it fired “back” twice.

Page2 has an infinitscroll and PTR.
I think that has something with this components, because I not appens on other pages. Is this posible?

This is the Click code

        $$(document).once('click', '.page-current  a.usar-este', function(e){ 

              mi_funcion(function(){

                   console.log ("BACK ");

                   app.infiniteScroll.destroy('.page-current .infinite-scroll-content');
                   app.ptr.destroy('.page-current .ptr-content');

                   app.view.main.router.back();
                    
              })   ;                  

        });

I read on github that I should initializate the view with this parameters (I’ve already done that)
app.views.create('.view-main', { url: '/' ,stackPages : true, preloadPreviousPage: false, iosSwipeBack: false});

But I’m having the same issue. Can you help me? because at third time I go to page2, takes me back to the index

2

Sounds like you could assign this live click handler more than once. If you did it in pageInit or other page event handler then it will be called multiple times

3

Yes, I know that but not, is not the case, I don’t have it in any other part of the page.
Is so strange.
Page2 is accessing via component page url. ¿Something with that?

{
  path: '/pages/:entidad/listado',              // ej: href="/pages/frutas/listado"
  componentUrl: './pages/listados.html',
  options: {
    context: {
              entidad: '{{entidad}}',         // Envia por param: "frutas"
              },
  },
},

Is something recurring
First time you enter page2 is fire 1 time
Second time you enter page2 is fire2 times
Third time you enter page3 is fire 3 times and sent you to index.

Is like about the quantity of times I access the page;
what else could I try to figure out what’s the problem?

4

That is definitely the case i mentioned. Where did you add that click handler?

6

your’re right. :zipper_mouth_face:

Inside the page “listados.html” on “pageInit” event.
Where should I put it ? I always put them inside pageInit … :fearful:

1 Like
7

If you use live/delegated event listener you can put it in main JS, or if in pageInit, then just use:

$(page.$el).on('click', 'a.usar-este', function (e) {
   ...
});
1 Like
8

Thank you so much! I’ll change it

9

Hi Vladimir, one more question. I fix it like you said.
Now, I’ve got a separate script page to handle this screen events.

How can I invoke a function that’s declared inside a component method? ( I like to have my code sort and have a function inside the component page, to handle the back custom function, to be call from outside)

10

It is impossible to call component’s functions from outside, components are scoped and shouldn’t be accessible from outside

11

ah ok :cry:
Thanks Vladimir !

12

Sorry for resurrecting a semi-old thread that has been solved Vladamier, but I am experiencing the same problem this person had and I’m not totally clear on the proper way to do this. I am attaching an on click event to an element using the beforeIn page event. It’s how I’ve always done it (or using pageInit) but for some reason in this particular instance I’m getting the function triggering each time I’ve visited a page and went back.

I totally understand why this happens, but I’m not clear of the proper way to handle it. I figure putting it in the page event was the cleanest so that the click handler would only be applied when I was on the page that needed it. I’ve read your answer and I’ve tried the code you supplied but it doesn’t seem to help me. What would be the best way to attach an event listener when I’m on the page that needs it?