javascript - 如何在通过 AJAX 添加元素后更新缓存的 jquery 对象

Question

我正在尝试在 jQuery 中编写类似插件的函数，以使用 AJAX 将元素添加到容器中。它看起来像这样:

$.fn.cacheload = function(index) {
    var $this = $(this);
    $.get("cache.php", {{ id: index }).done(function(data) {
        // cache.php returns <div class='entry'>Content</div> ...
        $(data).insertAfter($this.last());
    });
}

我想这样使用它:

var entries = $("div.entry"),
    id = 28;

entries.cacheload(id);

认为这会加载另一个“入口”容器并将其添加到 DOM。

到目前为止，这是可行的。但是，保存缓存的 jQuery 对象 (entries) 的变量当然不会更新。因此，如果一开始有两个 div，并且您将添加另一个具有此功能的 div，它将显示在 DOM 中，但 entries 仍将仅引用原始的两个 div。

我知道您不能使用 get 的返回值，因为 AJAX 调用是异步的。但是有什么方法可以更新缓存的对象，使其也包含通过 AJAX 加载的元素吗？

我知道我可以这样做并在插入后重新查询:

    $.get("cache.php", {{ id: num }).done(function(data) {
        $(data).insertAfter($this.last());
        entries = $("div.entry");
    });

但为此我必须直接引用保存缓存对象的变量。有没有办法解决这个问题，所以这个功能是独立的？我尝试重新分配 $(this)，但出现错误。 .add() 不会更新缓存的对象，它会创建一个新的(临时)对象。

非常感谢!

//更新:

John S 在下面给出了非常好的答案。然而，我最终意识到对我来说其他的东西实际上会更好。现在插件函数插入一个空白元素(同步)，当 AJAX 调用完成时，该元素的属性被更新。这也确保了元素以正确的顺序加载。对于任何遇到这个问题的人，这里有一个 JSFiddle:http://jsfiddle.net/JZsLt/2/

Answer 1

正如您自己所说，ajax 调用是异步的。因此，您的插件也是异步的。在 ajax 调用返回之前，您的插件无法将新元素添加到 jQuery 对象。另外，正如您发现的那样，您无法真正添加到原始 jQuery 对象，您只能创建一个新的 jQuery 对象。

您可以做的是让插件将回调函数作为第二个参数。可以向回调传递一个包含原始元素和新插入元素的 jQuery 对象。

$.fn.cacheload = function(index, callback) {
    var $this = this;
    $.get('cache.php', { id: index }).done(function(html) {
        var $elements = $(html);
        $this.last().after($elements);
        if (callback) {
            callback.call($this, $this.add($elements));
        }
    });
    return $this;
};

然后你可以调用:

entries.cacheload(id, function($newEntries) { doSomething($newEntries); } );

当然，你可以这样做:

entries.cacheload(id, function($newEntries) { entries = $newEntries; } );

但是 entries 在 ajax 调用返回之前不会改变，所以我看不出它有多大值(value)。

顺便说一句:插件中的 this 指的是一个 jQuery 对象，所以不需要调用 $(this)。