Help, pagecontainerbeforeshow not fired!

Help, pagecontainerbeforeshow not fired!

Hi, I am very new to jQuery and Javascript. Recently I am learning from one jQuery Book. There is an example in the book which is about to use 'pagecontainerbeforeshow' to get content from json files and show them on a new page. I have tried this example on my env, but failed.
The code piece as follows:
<div data-role="page" id="homepage">

    <div data-role="header">
        <h1>Dynamic Pages</h1>
    </div>

    <div role="main" class="ui-content">

        <ul id="peopleList" data-role="listview" data-inset="true"></ul>
    <script>
    $("#homepage").bind("pagebeforecreate", function(e) {
      //load in our people
      $.get("people.json", {}, function(res,code) {
        var s = "";
        for (var i = 0; i < res.length; i++) {
          s+="<li><a href='test_people.html?id="+res[i].id+"'>"+
          res[i].name+"</a></li>";
        }
        $("#peopleList").html(s).listview("refresh");
      }, "json");

    });


$(document).on("pagecontainerbeforeshow", function(e) {
      console.log('pagecontainerbeforeshow');
    var page = $.mobile.pageContainer.pagecontainer("getActivePage")[0];
      var parts = $.mobile.path.parseLocation();
      if(parts.pathname.indexOf("test_people") >= 0) {

        var thisId = parts.search.split("=")[1];
        $.get("person"+thisId+".json", {}, function(res, code) {
          $("h1",page).text(res.name);
          s = "<p>"+res.name+
          " is a "+res.gender+" and likes "+res.hobbies+"</p>";
          $("#contentArea", page).html(s);
        }, "json");

      }
    });

</script>

    </div>

</div>

The first part is about to create the list element before page creation and it works.
The second part is supposed to fired when we click on the list. But in fact it only fired when we enter into this page. Click on list doesn't lead to this piece of code.

Does anybody know what went wrong?