1

所以，我正在尝试实现一个加载函数，该函数将从我的应用程序的第一页执行 jquery 代码，以包括在该页面上加载的页面.. 即 page1.html 有一个 id="content" 的空 div我希望它在我的根文件夹中填充另一个外部页面..我尝试了以下...

 $(document).ready(function() {  
$('input').click(function() {  
$.ajax({
  url: "./page2.html",
  type: "GET"
  }).done(function(response, status, xhr) {
  $("#div1").html(response);
  alert(status + " : " + xhr) 
  }); 
 }); 
});

和 HTML 页面

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>my Page</title>
  <link rel="stylesheet" href="javascript/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" />
  <script src="javascript/jquery.mobile-1.3.1/jquery-1.9.1.min.js"></script>
  <script src="javascript/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>
  <link rel="stylesheet" href="my.css" />
  <script src="my.js"></script>
</head>
 <body>
     <!-- Question1 -->
    <div id="question1" data-role="page" class="questionContainer radius" data-theme="b">
      <div id="hbox" data-theme="b" data-role="header">
          <a id="bb1" class="back_button" data-role="button" data-theme="a" href="index.html" data-icon="arrow-l" data-iconpos="left">
                  Back
               </a>
              <a id="hb1" data-role="button" data-theme="a" href="app-help.html" data-icon="info"
          data-iconpos="right" class="ui-btn-right">
               Help
           </a>
         <h3 id="q1">
               Question 1
         </h3>
       </div>
       <div class="question"><h3>Q1:is this even right?</h3></div>
          <h3 id="c1" style="border:solid;">
              What Ever is the Question!
           </h3>
            <div id="rb1" data-role="fieldcontain" class="answers">
               <fieldset data-role="controlgroup" data-type="vertical">
                   <legend>
                       Choose:
                   </legend>
                   <ul>
                     <li><input id="q1-a" class="a1" name="Radio Buttons" value="radio1" type="radio"/> 
                     <label for="q1-a">
                       Yes.
                      </label></li>
                     <li><input id="q1-b" class="b1" name="Radio Buttons" value="radio2" type="radio"/>
                <label for="q1-b">
                  No.
                </label></li>
              </ul>
          </fieldset>
      </div>
    <div class="btnContainer">
            <div id="next1">
                <input id="next1" class="next" type="button" data-inline="true" data-theme="a" value="Next" data-icon="arrow-r" data-iconpos="right"/>
            </div>
        </div>
 <div id="fbox" data-theme="b" data-role="footer" data-position="fixed">
    <span class="ui-title">
         </span>
       </div>
    </div>
    <div id="div1"></div>

  </body>
 </html>

好的...更新，我尝试了网络上的许多答案，但没有一个像我想要的那样在 div 中显示第二页..它正在获取它，但没有显示它..我还删除了一大块 jQuery假设捕获用户的结果并在最后计算分数..但由于某种原因，这段代码导致页面没有得到任何东西，但是，当我删除代码时..当我再次显示第一页时单击下一个按钮..但格式混淆...再次萤火虫向我显示我正在获得第二页..但显示第一页..感谢帮助:)有人建议我这可能是干扰我的 ajax 的 jQuery 或 CSS .. 我的意思是..我不知道该怎么做 .. 无论如何.. 非常感谢您之前的帮助..！

米

4

2 回答 2

2

这个怎么样？当您只想将内容加载到您的 div 中时，您似乎做了很多额外的事情。 

<script type="text/javascript">
$(document).ready(function() {  // load document 
    $.ajax({
      url: "page2.html",
      context: document.body
    }).done(function(response, status, xhr) {
      $("#content").html(response);
      alert(status + " : " + xhr) //alert me with the server response, status
    }); 
});
</script>

如果您确实需要在单击事件上发生这种情况，请将其移动到单击事件中。

$(document).ready(function() {  // load document 
 $('.next').click(function() {  //use the class of "next" when clicked and ...
    $.ajax({
      url: "page2.html",
      context: document.body
    }).done(function(response, status, xhr) {
      $("#content").html(response);
      alert(status + " : " + xhr) //alert me with the server response, status
    }); 
  }); 
 });
});
于 2013-04-12T14:34:33.820 回答
0

我能发现的是你试图在元素本身上调用 create 。

当您调用$('this')（$(this) 用于引用“当前元素”）时，您应该在调用.trigger('create');创建新 div 时引用父元素。在这种情况下，父元素似乎是$('.next').

您的代码将是：

$('.next').click(function() { 
  var amaparent = $(this);
  $("#content").load("page2.html", function(response, status, xhr) {
   amaparent.trigger('create');
  }); 
 });
于 2013-04-12T14:31:31.557 回答