javascript - Redirect Jquery mobile to new page with triggering of functions in this page? -

javascript - Redirect Jquery mobile to new page with triggering of functions in this page? -

i building mobile app, using jquery mobile, , in front end page let's phone call page-1 contains navigation buttons different pages let's phone call 1 of them page-2

below page-1

$(document).ready(function () { $("body").pagecontainer({ defaults: true }); $("#page-2").click(function () { $("body").pagecontainer("change", "page-2.html", { reload: true }); $(document).ready(function () { function_in_page - 2.init(); }); });

page-2 has next

var function_in_page = { init: function () { alert('first-1'); $("#button-1").click(function () { alert('second-1'); }); });

so happening alert of "first-1" when click button id (button-1) nil happens , advise?

first of all, .pagecontainer() auto-initialized default settings, don't need initialize it.

secondly, refrain using .ready() add together listeners in jquery mobile , stick pagecontainer events instead. latter events fired whenever jqm framework loads page and/or navigates via ajax, in single page model. unlike .ready() fires 1 time when framework initialized.

there many methods command webapp using jquery mobile in single page model using pagecontainer events. safest way give each page unique id in order determine event omitted on page. note, need know no matter how many external pages have, 2 pages remain in dom; homepage , external page have navigated homepage.

to add together listeners, utilize pagecreate event, equivalent .ready() , can delegated specific pages.

class="lang-html prettyprint-override"><div data-role="page" id="home"> class="lang-js prettyprint-override">$(document).on("pagecreate", "#home", function () { $(".selector").on("click", function () { /* run code */ }); });

that event fire 1 time per page, note fire 1 time again on external page loaded via ajax. therefore, should remove previous bindings before adding new ones, using .off(). otherwise, attached listeners multiple whenever load external page via ajax.

class="lang-html prettyprint-override"><div data-role="page" id="second"> class="lang-js prettyprint-override">$(document).on("pagecreate", "#second", function () { $(".selector").off("click").on("click", function () { /* run code */ }); });

keep custom js code in head of pages, although code loaded 1 time in first run. jquery mobile loads first page div of each external page, outside div exclusively neglected.

back code above, here how should like. give each page id, , utilize them add together click listeners. let's assume home homepage , second page-2.html.

class="lang-js prettyprint-override">$(document).on("pagecreate", "#home", function () { $("#btn").on("click", function () { $.mobile.pagecontainer.pagecontainer("change", "page-2.html"); }); });

now, page-2.html visible. add together click listener button-1.

class="lang-js prettyprint-override">$(document).on("pagecreate", "#second", function () { $("#button-1").off("click").on("click", function () { alert("page 2"); }); });

demo

read more pagecontainer events.

javascript jquery jquery-mobile