移动jquery ajax加载的内容以使其可重用

我有几个指向单个AJAX url的链接。我可以将它加载到一个#DIV中，针对每个带有模式的请求：为每个链接加载和删除。现在，因为我只需要一个url，所以我试图避免删除和重新请求过程

我有两种情况，仍有疑问，急需建议来处理：

创建不同的容器#DIV，以便在将此url加载到每个DIV中时不会发生冲突，并继续定期隐藏和显示（不破坏/删除）。这意味着每个链接请求相同的url，并将相同的AJAX加载到每个容器#DIV中。非常消耗，因为每个链接都会一次又一次地加载相同的AJAX

只创建一个#DIV，然后将这个#DIV移动到另一个.DIV（同一个包含类，比如.ajax容器）中

所以我想得到的是可重用的高效代码。如有任何建议和示例，将不胜感激

更新，补充了迄今为止为澄清我的问题所做的工作：

    $('a.browse')
             .click(function(){
                   var t = $(this);
                   t.show();
                   t.parent().prev().find('input.tex').addClass('focus');

                   // @TODO, avoid using remove(), and move this into another .hasPicker class instead to REUSE the same content
                   $('#imgPicker,#closebox').remove();

                   $('.picker-on').removeClass('picker-on');
                   t.parent().prev().find('input.tex').after('<div id="imgPicker"></div>').parent().addClass('picker-on');

                   // @TODO,  Check if #tabs has been loaded somewhere, and try to append it into current link that calls it
                   if ($('#tabs').length) {
                     t.parent().prev().find('#imgPicker').append('#tabs');
                   } else {
                     t.parent().prev().doAjax(); // load the same AJAX content
                   }
                   t.hide();

                   return false;
             });

$('input.tex').wrap('<div class="hasPicker"></div>');

$（'a.browse'）
。单击（函数（）{
var t=$（本）；
t、 show（）；
t、 parent（）.prev（）.find（'input.tex'）.addClass（'focus'）；
//@TODO，请避免使用remove（），并将其移动到另一个.hasPicker类中，以重用相同的内容
$（“#imgPicker，#closebox”）.remove（）；
$（'.picker-on'）.removeClass（'picker-on'）；
t、 parent（）.prev（）.find（'input.tex'）。在（''.parent（）.addClass（'picker-on'）之后；
//@TODO，检查#tabs是否已加载到某处，并尝试将其附加到调用它的当前链接中
如果（$（'#制表符'）。长度）{
t、 parent（）.prev（）.find（'#imgPicker'）.append（'#tabs'）；
}否则{
t、 parent（）.prev（）.doAjax（）；//加载相同的AJAX内容
}
t、 隐藏（）；
返回false；
});
$（'input.tex'）.wrap（“”）；

下面是doAjax（）的内容：

$.fn.doAjax=function（）{
返回此值。每个（函数（）{
//检查挂起的请求并取消它
if（req）req.abort（）；
//showLoading（）；
req=$.ajax({
url:“？ajax=1”，
方法：'GET'，
是的，
成功：功能（数据）{
$（'#imgPicker'）.html（data.show（））.after（''）；
$（'#closebox'）.show（）；
$（“#制表符”）.tabs（）；
//重置请求
req=null；
},
错误：函数（）{
警报（“无法加载图像采集”）；
}
});
});
};

注意：#imgPicker是#选项卡的动态容器。我曾经有一个ui.dialog，但是看到它的大小，我就用一个简单的自定义弹出位置来完成它，绝对位置与请求它的链接和表单相对。doAjax（）作为加载相同内容（#选项卡）的单个请求单独处理。input.tex是一组textfield表单（可在其中存储#选项卡中的所有项目/选项），后跟通过相同AJAX url请求相同AJAX内容的链接

希望我能说清楚

---

谢谢

所以，我不确定我是否理解您的意图，但让我看看

您正在尝试将同一内容加载到多个容器中？还是每次通话的结果都会改变？（自从你说“非常消耗”，我就想到了同样的内容）

由于这是标记为jquery的

您可能正在执行以下操作：

1.    $.ajaxSetup ({   
2.        cache: false  
3.    });   
4.    var ajax_load = "<img src='img/load.gif' alt='loading...' />";   
5.       
6.//  load() functions   
7.    var loadUrl = "ajax/load.php";   
8.    $("#load_button").click(function(){   
9.        $("#someDiv").html(ajax_load).load(loadUrl);   
10.    });  

1.$。ajaxSetup（{
2.缓存：false
3.    });   
4.var ajax_load=“”；
5.
6//load（）函数
7.var loadUrl=“ajax/load.php”；
8.    $（“#加载按钮”）。单击（函数（）{
9.$（“#someDiv”）.html（ajax#u load）.load（loadUrl）；
10.    });  

因此，请尝试：

    $.ajaxSetup ({   
        cache: false  
    });   
    var ajax_load = "<img src='img/load.gif' alt='loading...' />";   

//  load() functions   
    var loadUrl = "ajax/load.php";   
    $("#load_button").click(function(){   
        $("#someDiv").html(ajax_load)
          .load(loadUrl, null, function(responseText){   
            $("#otherDiv").html(responseText);
         });   
    });  

$.ajaxSetup（{
缓存：false
});   
var ajax_load=“”；
//load（）函数
var loadUrl=“ajax/load.php”；
$（“#加载按钮”）。单击（函数（）{
$（“#someDiv”）.html（ajax#u加载）
.load（loadUrl，null，函数（responseText）{
$（“#otherDiv”）.html（responseText）；
});   
});  

这也会将结果应用于第二个元素

如果您试图在单击每个链接时仅显示相同的内容，则最好执行以下操作：

  var showOnClick = function(){
       var cacheResult = "";
       var ajax_load = "<img src='img/load.gif' alt='loading...' />";
       return function(){

         var divId = "";
         if(this.id === "button1") { divId = "#Div1"; } 
         else if (this.id === "button2") {divId = "#Div2";}

         if(!!cacheResult){
           $(divId).html(ajax_load).load(loadUrl, null, function(responseText){
              cacheResult = responseText;
           });       
         } else {
           $(divId).html(cacheResult);
         }         
       }; 
    }();

    $("#button1").click(showOnClick);
    $("#button2").click(showOnClick);

var shownclick=function（）{
var cacheResult=“”；
var ajax_load=“”；
返回函数（）{
var divId=“”；
如果（this.id==“button1”）{divId=“#Div1”；}
如果（this.id==“button2”）{divId=“#Div2”；}
如果（！！缓存结果）{
$（divId）.html（ajax\u load）.load（loadUrl，null，函数（responseText）{
cacheResult=responseText；
});       
}否则{
$（divId）.html（cacheResult）；
}         
}; 
}();
$（“#按钮1”）。单击（showOnClick）；
$（“#按钮2”）。单击（showOnClick）；

您可以尝试新发布的Jquery 1.4。我不知道您想说什么，但我看到的是您可以使用Jquery 1.4中的.detach（）函数。这将临时从DOM中删除数据，您可以根据需要再次使用它。希望这能有所帮助。

我一点也不清楚你在问什么。你能提供一些示例代码吗？嗨，代码已添加，对不起。正如我所说的，我仍然在质疑最好的方法，因为AJAX是一个巨大的图像集合：）所以一遍又一遍地请求相同的内容是完全不好的主意，我想谢谢你的回答，我会尝试将它合并到我的代码中，看看这是否解决了问题。为了澄清我自己的问题，我添加了我现在正在研究的代码。抱歉，如果这还不清楚。

  var showOnClick = function(){
       var cacheResult = "";
       var ajax_load = "<img src='img/load.gif' alt='loading...' />";
       return function(){

         var divId = "";
         if(this.id === "button1") { divId = "#Div1"; } 
         else if (this.id === "button2") {divId = "#Div2";}

         if(!!cacheResult){
           $(divId).html(ajax_load).load(loadUrl, null, function(responseText){
              cacheResult = responseText;
           });       
         } else {
           $(divId).html(cacheResult);
         }         
       }; 
    }();

    $("#button1").click(showOnClick);
    $("#button2").click(showOnClick);