如何在加载jquery后追加

时间:2014-12-26 15:47:11

标签: javascript jquery asynchronous

我已经在元素中添加了一些数据,我只想加载并追加更多内容, 我想加载和追加具有属性数据加载的每个元素。 我这样做但是没有工作。有人可以帮我这个,谢谢。

$(function(){
    $("[data-load]").each(function(index){
        var $tmp = $('<div>');
        var valueData = $(this).data("load")
        $tmp.load(valueData);
        $(this).append($tmp.html());
    });
})

1 个答案:

答案 0 :(得分:1)

load()$.ajax()的便捷方法。

AJAX是异步的,所以当您尝试从$tmp

中获取返回的html时,http请求将不会完成

您需要使用load()的完整回调在返回的结果中执行任何操作

继续使用load()方法尝试:

 $("[data-load]").each(function (index) {
     var $tmp = $('<div>'),
         $el = $(this);
     var valueData = $(this).data("load")
     $tmp.load(valueData, function () {
         /* the ajax has completed here */
         $el.append($tmp.html());
     });

 });

$.ajax的另一种快捷方法是$.get,我认为通过不需要创建临时存储元素可以使这段代码更具可读性和更短一点

 $("[data-load]").each(function (index) {
     var $el = $(this);
     $.get($el.data("load"), function(response){
         $el.append(response);
     });    

 });

两个解决方案都假设data-load属性是一个返回预期html的有效网址。