Event is repeating even on clicking once?

Questions
1

My app.js contains following code:-

$$(document).on('page:init','.page[data-name="channelpost"]',function(e,page){
    $$(document).on("click",'.likebutton',function(){
        var liketype="b";
        if(id==="page1")liketype="b";
        if(id==="page3")liketype="c";
        var likeid=$$(this).attr("value");
        var num_of_likes=$$(this).attr("likesd");
        var liked=$$(this).attr("liked");
        LikeButton.Base(likeid,num_of_likes,liketype,TestingParameters,liked);
    });
});

Above code works fine if the page is visited once.If the page is visited twice, the event will be fired twice even on clicking once as page is initialised twice. How to avoid this problem? I cannot place the event outside init event as it requires id which is only available inside the page.

2

Because you use events in a wrong way

change to

$$(document).on('page:init','.page[data-name="channelpost"]',function(e,page){
    page.$el.on("click",'.likebutton',function(){
3

I tried your solution but problem persists. When i changed my code to following:-

$$(document).on('page:init','.page[data-name="channelpost"]',function(e,page){
  console.log('page is getting intialised');
  page.$el.on("click",'.likebutton',function(){

image
image735×293 14.3 KB

When i’m visiting the page second time, it’s getting initialised twice and when i visited it 3rd time, it’s getting initialised three times as shown in console.

4

what framework ??

  1. Cordova
  2. Ioninc
  3. React
  4. Phonegap
5

Cordova but i believe that this problem is platform independent

6

I believe there are two ways of solving the problem
1)Remove all the events attached to the page before it gets destroyed
2) Implement some sort of timer like mechanism which will ensure that page is initialised only once.
But i don’t know how to implement them in framework7. Any idea @nolimits4web

7

Page initialized only once in F7. You error still means you added that event listener somewhere in wrong place, but such “LIVE” event listener like you have:

$$(document).on('page:init','.page[data-name="channelpost"]'

More likely should be placed only once in main file, not in any event handler.

8

Try

$$(document).off('click').on("click",'.likebutton',function(){

9

All the page initialisation events are placed in app.js and events are placed in the init event. what i don’t understand is why console has been logging the event multiple times but not when visited first time.

10

Add

$$(document).on(‘page:beforeout’,’.page[data-name=“channelpost”]’,function(e,page){
$$(document).off(“click”,’.likebutton’,function(){
var liketype=“b”;
if(id===“page1”)liketype=“b”;
if(id===“page3”)liketype=“c”;
var likeid=$$(this).attr(“value”);
var num_of_likes=$$(this).attr(“likesd”);
var liked=$$(this).attr(“liked”);
LikeButton.Base(likeid,num_of_likes,liketype,TestingParameters,liked);
});
});