CODEWITHSUNDEEP
javascriptjquery-mobile
Biribu
Biribu

Reputation: 3823

Pageshow in JQM adds new page without removing old ones

I have an issue with my webpage. I think it is something like this problem: https://stackoverflow.com/questions/24350594/jqm-pageshow-event-firing-number-of-times-on-page-visit

Each time I go back and go into my page (with pageshow) it loads everything again (as I want) but it seems like if I have two pages or more if I go in 3, 4 or more times. So each time I press a button to send data to the server it executes many times (as much as times I go out and in to that webpage)

I need to reload the whole page each time I go inside so I can't use one instead on:

$(document).on("pageshow", '#activity', function() {

I also tried with: 

$(document).off("pageshow", '#activity').on("pageshow", '#activity', function() {

But it seems not to work.

Is there a way to eliminate a webpage each time I go out? I just want to have one copy

Upvotes: 1

Views: 28

Answers (1)

Omar
Omar

Reputation: 31732

To add bindings / attach listeners such as click, change, etc, they should be placed inside pagecreate event as it fires one time per page. That event is equivalent to .ready().

$(document).on("pagecreate", '#activity', function() {
  /* listeners */
  $("#foo").on("change", function () {
    $.ajax();
  });
});

Use pageshow/pagecontainershow and events similar to it, to manipulate DOM or execute other functions.

jQM 1.3

$(document).on("pageshow", '#activity', function() {
  /* manipulate DOM */
  $("#foo").removeClass("bar");

  /* run functions */
  $.doSomething();
});

jQM 1.4

$(document).on("pagecontainershow", function(e, data) {
  if(data.toPage[0].id == "activity") {
    /* manipulate DOM */
    $("#foo", data.toPage).removeClass("bar");

    /* run functions */
    $.doSomething();
  }
});

Upvotes: 1

Related Questions