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

Question

I am building a mobile app, using JQuery mobile, and in the front page let's call it page-1 contains navigation buttons to different pages let's call one of them page-2

Below are 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 the following

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

So what is happening that I get the alert of "First-1" but when I click the button with ID (button-1) nothing happens , any advise?

Answer 1

First of all, .pagecontainer() is auto-initialized with default settings, so you don't need to initialize it.

Secondly, refrain from using .ready() to add listeners in jQuery Mobile and stick to pagecontainer events instead. The latter events are fired whenever jQM framework loads a page and/or navigates to it via Ajax, especially in Single Page Model. Unlike .ready() which fires one time only when framework is initialized.

There are many methods to control your webapp using jQuery Mobile in a Single Page Model using pagecontainer events. The safest way is to give each page a unique ID in order to determine which event is omitted on which page. Another note, you need to know that no matter how many external pages you have, only two pages will remain in DOM; homepage and another external page you have navigated to from homepage.

To add listeners, use pagecreate event, it is equivalent to .ready() and can be delegated to specific pages.

<div data-role="page" id="home">

$(document).on("pagecreate", "#home", function () {
   $(".selector").on("click", function () {
      /* run code */
   });
});

That event will fire once per page, but note that it will fire again on any external page loaded via Ajax. Therefore, you should remove previous bindings before adding new ones, by using .off(). Otherwise, attached listeners will multiple whenever you load an external page via Ajax.

<div data-role="page" id="second">

$(document).on("pagecreate", "#second", function () {
   $(".selector").off("click").on("click", function () {
      /* run code */
   });
});

Keep all your custom JS code in head of all pages, although the code will be loaded once in first run. jQuery Mobile loads first page div of each external page, anything outside that div is entirely neglected.

---

Back to your code above, here is how it should look like. Give each page an ID, and use them to add click listeners. Let's assume home is homepage and second is page-2.html.

$(document).on("pagecreate", "#home", function () {
   $("#btn").on("click", function () {
      $.mobile.pageContainer.pagecontainer("change", "page-2.html");
   });
});

Now, page-2.html is visible. Add a click listener to button-1.

$(document).on("pagecreate", "#second", function () {
   $("#button-1").off("click").on("click", function () {
      alert("page 2");
   });
});

Demo

Read more about pagecontainer events.

Answer 2

If the script in page-2 is executed to early the button might not exist yet. Try wrapping it in a document.ready

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