Javascript 问题 $(document).on/live/bind 不起作用答案

【问题标题】：Java script issue $(document).on / live / bind not workingJavascript 问题 $(document).on/live/bind 不起作用
【发布时间】：2012-11-15 13:55:46
【问题描述】：

我正在尝试在通过 ajax 调用加载的页面上实现随机答案。我正在使用 jquery 移动包容性布局。因此，我在 div data-roll 容器中添加了一个简单的 java 脚本，并通过 $(document).live 或 $(document).on 或 $(document).bind 对其进行了初始化，就像它应该根据这里的许多答案或建议一样.当我使用正常的警报功能时，一切正常。像这样

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

当我将脚本添加到普通的 html 页面时，我的脚本也可以正常工作。

因此，当我改用警报时，我使用函数 getanswer() 它不起作用。我在这里做错了什么？感谢您的帮助。

<!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>

【问题讨论】：

标签： jquery-mobile page-init

【解决方案1】：

你忘了调用你的函数getanswer()...
见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>

【讨论】：