jQuery & jqTouch - ajax.load 问题答案

【问题标题】：jQuery & jqTouch - ajax.load problemjQuery & jqTouch - ajax.load 问题
【发布时间】：2010-02-23 17:34:23
【问题描述】：

我认为我的问题更多在于我的方法并且更多地适用于 jquery，但是这里发生了一些奇怪的事情。

我正在使用 jQuery 和 jqTouch。我的html是：

<div id="home" class="current">
    <div class="toolbar">
        <h1>Header</h1>
    </div>
    <ul class="rounded">
        <li class="arrow"><a href="#currentloc">Current Location</a></li>
    </ul>       
</div>
<div id="currentloc">
    <div class="toolbar">
        <h1>Nearby</h1>
    </div>
</div>

我想要做的是当用户单击当前位置链接时，pageAnimationEnd 我想加载一个页面并将其附加到#currentloc。这是我的代码：

$('#currentloc').bind('pageAnimationEnd', function(e, info){
    $(this).load('results.php');
});

如您所见，这将完全替换#currentloc 的内容。我不确定如何在不替换现有内容的情况下附加 results.php 的内容。我已经研究过将 ajax 加载请求放在 append 中：

$(this).append(load('results.php'));

但这完全行不通……

知道该怎么做吗？

更新

我尝试过但感觉有点笨拙的一件事是

$('#currentloc').bind('pageAnimationEnd', function(e, info){
 $(this).append('<ul></ul>');  
 $(this).find('ul').load('results.php');
});

感觉有更好的解决方案。

【问题讨论】：

标签： jquery ajax jqtouch

【解决方案1】：

jquery 中的 load 函数会替换内容，因此如果您希望保留当前内容，则必须创建另一个元素。如果删除对 find 函数的调用，可以使代码更短一些。

$('#currentloc').bind('pageAnimationEnd', function(e, info){
   $(this).append($('<ul />').load('results.php'));   
});

或

$('#currentloc').bind('pageAnimationEnd', function(e, info){
   $('<ul />').load('results.php').appendTo(this);   
});

【讨论】：