[SOLVED] Infinite Scrolling and new added items with clicks, the clicks stop working

I am using infinite scrolling to add new items in my mobile screen, these items has links, for instance the items being created via a handlebars templates are hotels with names and link to their descriptions, the problem it is not the showing 10 hotels, the problem is that the new hotels being created by using the infinite scroll, the clicks links inside the hotels cards are not working anymore when added using infinite scrolling…

I think the problem is that the new added items are losing the click event when created…

any solution for this issue ?

thanks

use $$(’.class-of-list’).on(‘click’, ‘.class-of-list-item’, () => { … }) instead of $$(’.class-of-list-item’).on(‘click’, () => { … })

1 Like

In general I have two types of clicks I am using the direct call

<a href="/page_to_call/">details</a>

this works when adding new items on scrolling …

but this below stops working once added on scrolling:

$("a.add-to-favorites").on("click", function(e) {
...

the first link it is declared in the router.js and works and it calls a new page to load…
but the second one it is only an action to happen to add this hotel to favourites…

this second one with .on(“click”, function(e) does not work anymore once added on scrolling…
that is the big problem I found…

I tried your approach and does not work either:

$("a.add-to-favorites").on("click","a.add-to-favorites", function(e) {

any solution you may think about?
thanks

change to

$(document).on("click","a.add-to-favorites", function(e) {
1 Like

yes with

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

it worked!

thanks ! I got it working with $(document) !

I found another issue in the click using it like this: :frowning:

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

it works for the click but it duplicate the click when returning to the page…

I mean when I click on that page that contains the list of hotels and I click add to favourites the click works for the items displaying and for the next items to be added on scrolling down…

the ISSUE is that when going back to the previous page and coming back again to this page, the clicks are now duplicated and when I click it send the click two times,

the same happen if I go back to the previous page and again to this page, the clicks are summing up and then if I go back many times let us say 5 times and coming back to the hotel list page that has the add to favorites action button then if I do a click to add the hotel to favourites then it sends the click 5 times… adding 5 times the same hotel…

anyway to avoid this strange behaviour ?

thanks

Please, you need to have basic understanding of how event works and what is the “delegated” events in the example with $(document) you should assign it only once to avoid multiple calls

Yes, It is assigned once on pageInit for all the page and not after new items that are created on scrolling down…

But I found a solution doing this below solve the issue of duplication or summing up clicks when going back and forth these pages:

 pageInit: function(e, page) {
....

$(document).off("click","a.add-to-favorites");

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

It works now this way not duplicating clicks when coming back…
I do not know if it is the right solution but it works…