Home/ Questions/Q 8553015
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T14:33:06+00:00

I am creating a jQuery Mobile web app, which loads some pages. For example,

  • 0

I am creating a jQuery Mobile web app, which loads some pages.

For example, a.html is my main page. It may call b1.html,b2.html,…,b100.html (User may click on one of buttons). (The pages are loading with ajax navigation feature of jQuery Mobile)

And there is some events in each b[i].html page, and ids and many things are same in every b[i].html page. But the point is, at any time, just one of them may be in DOM. So there will be no id conflicts or such.

The problem

The problem is the conflict of the events. When user come back to a.html from b[i].html, the HTML will be removed, but events will remain. This will cause many problems if I first go to b[i].html, and then come back to a.html and then go to b[j].html. I mean, b[j].html will not work correctly… 🙁

What I have tried

I have putted this in a.html, to remove all events:

$("#mainpage").off("pagebeforeshow").on("pagebeforeshow",function() {
    $("*").not("#mainpage").off();
    //Other initialization codes...
});

But, problem not solved…

(mainpage is the id of data-role="page" of a.html)

Example

For example, I have this in each b[i].html:

$(window).resize(function () {
    alert("Resized");
});

At the beginning (in a.html), If I resize the window, there will be no alerts, but after visiting b[i].html and then coming back to a.html, I’ll see alerts if I resize the window, even with that line of code (What I have tried part.)…

So, How to remove those event handlers when users come back to a.html from b[i].html?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you are using jQuery Mobile, more than one of said pages may exist in the dom at the same time, resulting in non-unique id conflicts.

    I would ditch putting js on the individual pages and have it done from the primary page, or through a script loading system such as require.js. Then do all of the events through delegation from the document. Obviously that won’t work with window.resize(), but it doesn’t need to be delegated anyway.

    “Can you please explain more?”

    Basically, if you are including scripts on the child pages, you will need to have both setup and teardown for every page. setup adds the events, and teardown removes them. If you instead used a single global script that adds ALL of the events using event delegation from the document, all of the pages should work. Obviously that global script could get pretty big on a complex site, so you could instead use require.js to load in js that does the same thing as needed, preventing it from loading the same dependency more than once.

    As far as removing all events, I’ve never tried this, but can you use $("*").off()? According to the docs it should work. I’m not sure how it will affect jQuery mobile. To remove events on the document and/or window, you will have to do it manually because $("*") will not select them.

    $(document).on("vmousemove","#link",func) is how you delegate an event from the document.

    • 0