Single page navigation not working properly

Question

I'm issuing a problem with single page navigation in WinJS app for windows 8.1 : I have a lot of pages on my app, and many of them have elements with same IDs (links to the same page called "myPage", for example). But something strange happens: On "page1", i have links to "page2" and "page3". on "page2" i have a link to "page1" and "page3". If i navigate from "page1" to "page2" and then back to "page1" and finally to "page3", that last link does not run. on the load function of "page1", i set all the eventHandlers for navigation like this example

document.getElementById("page3").onclick = function () {
    WinJS.Navigation.navigate("/pages/page3/page3.html");
};

same code is present on load function of link to "page3" in "page2" the elements got the same id. if i navigate directly to "page3" without going through "page2" it works properly.

There is a way to avoid this issue without changing all the elements id?

Answer 1

You have to wait, until all resources are loaded.

    WinJS.UI.processAll().done(function () {
        document.getElementById("page3").onclick = function () {
            WinJS.Navigation.navigate("/pages/page3/page3.html");
        };
    });

More info: https://msdn.microsoft.com/es-es/library/windows/apps/hh440975.aspx

Answer 2

You are missing the WinJS.UI.processAll() function in your onClick() function. Basically, wrapping your logic this function will fix the problem.