Java script issue $(document).on / live / bind not working

I am tryign to implement a random answer on a page loaded via an ajax call. I am using jquery mobile inclusive layout. Therefore I added a simple java script in the div data-roll container and initialized it via $(document).live or $(document).on or $(document).bind, like it should be according to many answers or suggestions here. Everything works fine, when I use a normal alert function. Like this

<script>
    $(document).live('pageinit', "#answerPage", function (event) {
               alert("Page Initialized");
         });
</script>

Also my script works fine, when I add it to a normal html page.

So when I instead using an alert I use function getanswer() it doesn`t work. What do I do wrong here? Thanks for your help.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

    </head> 
<body>

<div data-role="page" id="answerPage" data-theme="b" data-add-back-btn="true">

     <script>
    $(document).on("pageinit", "#answerPage", function(event) {
            function getanswer() {
                    var r_text = new Array ();
                        r_text[0] = "A";
                        r_text[1] = "B";
                        r_text[2] = "C";
                        r_text[3] = "D";
                        r_text[4] = "E";
                        r_text[5] = "F";
                        r_text[6] = "G";
                    var i = Math.floor(7*Math.random());
                    document.getElementById("ShowAnswer").innerHTML = r_text[i];
                    };

          });
     </script>

     <div data-role="header" data-position="fixed" data-theme="b">
         <div id="ShowAnswer"> </div>   

     </div>
</div>
</body>
</html>

Solution

you forgot to call your function getanswer()...
see working example:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
  <div data-role="page" id="answerPage" data-theme="b" data-add-back-btn="true">
     <div data-role="header" data-position="fixed" data-theme="b">
       <div id="ShowAnswer"></div>
     </div>
  </div>

  <script>
    $(document).on("pageinit", "#answerPage", function(event) {
      getanswer();
    });

    function getanswer() {
      var r_text = new Array ();
      r_text[0] = "A";
      r_text[1] = "B";
      r_text[2] = "C";
      r_text[3] = "D";
      r_text[4] = "E";
      r_text[5] = "F";
      r_text[6] = "G";
      var i = Math.floor(7*Math.random());
      document.getElementById("ShowAnswer").innerHTML = r_text[i];
    };
   </script>
</body>
</html>