jquery .load() 没有在创建的 div 中加载下一个外部文件答案

【问题标题】：jquery .load() is not loading the next external file in a created divjquery .load() 没有在创建的 div 中加载下一个外部文件
【发布时间】：2013-04-12 14:13:19
【问题描述】：

所以，我正在尝试实现一个加载函数，该函数将从我的应用程序的第一页执行 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>

【问题讨论】：

@MohammadAdil 你是什么意思？他想要更改加载的 HTML 中存在的元素，而不是更改文件本身。
嗯 .. 我错过了那部分
感谢您的快速回复！ ...我想知道你是否可以指出我的一些事情？那真的很有帮助:)再次感谢您
哦 O_O 是的，我忘了提……对不起……我是她：P
如您所知，您可以在加载函数中指定要加载的元素。 $('#content').load('page2.html #Page2ElementId');

标签： jquery html jquery-mobile jquery-load

【解决方案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
    }); 
  }); 
 });
});

【讨论】：

好的...我尝试了这段代码...它在某种程度上可以工作，因为它向我展示了我为下一页而不是页面本身创建的 div ...我不知道该怎么做..但是谢谢！这真的很有帮助
顺便说一句，它正在发出成功状态的警报，即成功：object Object ...我更加困惑..
好吧，我玩了很多..仍然没有完全工作的结果..因为它正在从第二页获取文本并将其显示在第一页..同时加载第二页。 .什么都没有发生...虽然我确信它正在得到一些东西..用firebug检查它..并使用本地主机..so..如果你 - 或任何人 - 可以告诉我如何解决这个..如果需要的话，我愿意上传整个东西。谢谢你，M

【解决方案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');
  }); 
 });

【讨论】：