1

我正在创建一个包含多个 HTML 页面、jquery 和电话间隙的移动应用程序。我不想在我的应用程序页面中复制粘贴相同的页脚，所以我创建了一个全局 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');
   });
});

效果很好。

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

4

3 回答 3

4

实际上不同之处在于$.get()你有一个回调函数，而你在里面$('#footer').trigger('create');放.load()了一个回调函数。

你应该这样做：

$(document).ready(function(){
    $('#footer').load("footer.htm", function(){
        $(this).trigger('create');
    });
});
于 2013-01-12T08:24:17.783 回答
4

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

于 2013-01-12T08:27:44.260 回答
0

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

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

于 2014-02-15T06:44:25.767 回答