Question

所以，我正在尝试实现一个加载函数，它将从我的应用程序的第一页执行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 ..它是GETting它，但没有显示它..而且我删除了一个jQuery的一大块，它被认为是捕获用户的结果并在最后计算得分...但由于某种原因，大量的代码导致页面无法得到任何东西，但是，当我删除代码时...页面显示再次，当我点击下一个按钮..但混合格式化...再次firebug显示我，我得到第二页..但显示第一页..帮助是赞赏:) 我被某人告知，它可能是一个jQuery或CSS干扰我的ajax ..我的意思是......我不知道该怎么办.....无论如何..非常感谢你以前的帮助.. ！

中号

Answer 1

这个怎么样？看起来你做了很多额外的事情，当你想要做的就是将内容加载到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
    }); 
  }); 
 });
});

Answer 2

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

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

您的代码将是：

$('.next').click(function() { 
  var amaparent = $(this);
  $("#content").load("page2.html", function(response, status, xhr) {
   amaparent.trigger('create');
  }); 
 });

jquery .load（）没有在创建的div中加载下一个外部文件

2 个答案: