How to avoid duplication of a click event handler when going back and forth pages?

1

I have an on click event that needs to exist in every page in general because it adds to favourites a hotel and essentially it does the same thing in every page but I added an extra class to the link so every page has a different click handler…

the problem it is that when going through pages, page list of hotels, page details of hotels and page gallery of specific hotel, every page has the this click button to add to favourites but the duplication of clicks even though occurs when going back and forth that page this means the click to add to favourites run twice and three times depending how many times I am on that page again…

I do not know how to avoid this thing…

for instance: the list of hotels it has an infinite loader for loading more hotels… so every new hotel displayed needs also attach this button click event to it as well… to be able to add it to favourites, then if I go deeper to the hotel details, the hotel details has the button add to favourites as well, it is the same action but using different class to distinguish it from the others clicks but the duplication occurs anyway when visiting that page again and again summing up handlers to that click all the time :frowning:

in every page mentioned above I have something like this:

for list page :

      pageInit: function(e, page) {

        $(document).on("click", "a.add-to-favourites.list", function(e) {

          _ref = $(this).attr('ref');
          console.log('adding to favourites');
          ///code....
        });

...
}

the click button has the reference of the hotel clicked… ref=12121 for instance…

<a href="#" class="add-to-favourites list" ref="{{../@index}}"><i class="icon add-to-favourites"></i></a>

the problem when navigation back and forth and enter the list page again the duplication of click occurs… like summing up the handlers all the time I visit the page…

This means I click add to favourites button when returning to that page twice then the button add to favourites run twice and so…

Any ideas how to avoid this sums up of clicks or duplication ?
thanks

1 Like
2

$(document).on(“click”, “a.add-to-favourites”, function(e) {

=> go out from pageInit to global JS

OR

<a href="#" class="add-to-favourites" ref="{{../@index}}"> => <a href="#" @click="clickEvent"...>
and in component:

methods {
    clickEvent : function (e) {
       this.$root.addToFavorite($(e.target).data('id'));
    }

in app config:

methods : {
addToFavorite : function (id) {

   } 
}
2 Likes
3

I just updated the info above may this reply you mentioned apply also to it? it happened all the time I am in the same page… again it sums up another click…

when using it with infinite loader I must attach this event also to the new hotels created… this is why I didn’t think about a global thing at first sight…

thanks for the ideas…

4

#1

$(document).on("click","a.add-to-favourites.list",function(e){

to

page.$el.on("click","a.add-to-favourites.list",function(e){

#2
once you attach the event,
you should not attach it again when you append new elements (on-infinite-scroll)

#3

<a href="#" class="add-to-favourites list"></a>

“list” should be a “reserved word” by the core
it may (or may not) break your css and it’s a bad practice
just call it “my-list”

3 Likes
5

big thanks for the time to reply!!! :tada::clap::clap::clap: