Question

我正在创建一个包含多个HTML页面，jquery和Phone gap的移动应用程序。我不想在我的应用页面中冗余地复制粘贴相同的页脚，所以我创建了一个全局的footer.html并尝试在文档.ready（）上加载该文件的内容。

页脚HTML

<div data-role="navbar" data-grid="d">
    <ul class="apple-navbar-ui comboSprite">
        <li><a href="../dashboard.html">Home</a></li>
        <li><a href="../contacts/contacts.html">Contacts</a></li>
        <li><a href="../applications/applications.html">Applications</a></li>
        <li><a href="settings.html">My Account</a></li>
    </ul>
</div>

主要HTML

<div data-role="page">
    <div id="footer" data-role="footer">
    </div>
</div>

$(document).ready(function () {
   $('#footer').load("footer.htm");
   $('#footer').trigger('create');
});

它加载了footer.html的内容，但Jquery mobile的UI无法呈现。

但是当我将文档就绪代码更改为此

时

$(document).ready(function () {
   $.get('footer.htm', function (retData) {
      $('#footer').append(retData);
      $('#footer').trigger('create');
   });
});

效果很好。

那么这两种方法有什么区别？为什么一个工作而另一个工作失败？

Answer 1

实际上不同之处在于，在您的$.get()中，您有一个回调函数，并且在$('#footer').trigger('create');中放置了.load()，而您没有放回调函数。

你应该这样做：

$(document).ready(function(){
    $('#footer').load("footer.htm", function(){
        $(this).trigger('create');
    });
});

Answer 2

方法之间的差异：
.get() - 加载所有内容
.load() - 可以加载部分内容$('#result').load('file.html #container');

Answer 3

.load（） - 从服务器获取数据的最简单方法，但与.get（）方法不同，允许我们指定要插入的远程文档的一部分。比如“$( "#result" ).load( "ajax/test.html #container" );”

.get（） - 使用HTTPGET请求从服务器加载数据。从服务器加载所有内容。

.load（）和$ .get（）之间的区别

3 个答案: