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); 

이 다른 "항목"-container을로드하고 DOM에 추가 할 것이라고 생각.

이것은 지금까지 작동합니다. 물론 캐시 된 jQuery 객체 (entries)를 보유하는 변수는 업데이트되지 않습니다. 따라서 시작 부분에 div가 두 개 있고이 함수가있는 div를 추가하면 DOM에 표시되지만 entries은 여전히 ​​원래 두 div 만 참조합니다.

AJAX 호출이 비동기이기 때문에 get의 반환 값을 사용할 수 없다는 것을 알고 있습니다. 하지만 AJAX를 통해로드 된 요소가 포함되도록 캐시 된 개체를 업데이트 할 수있는 방법이 있습니까?

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

을하지만 내가 직접 캐시 된 오브젝트를 유지하는 변수를 참조 할 것 :

는 내가 삽입 한 후이 다시 쿼리처럼 할 수있는 알고있다. 주위에 어떤 방법이 있어도 기능 자체가 포함되어 있습니까? $(this)을 재 할당하려고 시도했지만 오류가 발생했습니다. .add()은 캐시 된 개체를 업데이트하지 않으므로 새로운 (임시) 개체를 만듭니다.

고맙습니다.

는 // UPDATE :

존 S 아래에 정말 좋은 대답을했다. 그러나, 나는 나를 위해 그것이 실제로 더 잘 작동 할 것이라는 것을 깨닫게되었다. 이제 플러그인 함수가 빈 요소를 동 기적으로 삽입하고 AJAX 호출이 완료되면 해당 요소의 특성이 업데이트됩니다. 또한 요소가 올바른 순서로로드되도록합니다. 여기에 걸려 넘어지면 JSFiddle이 있습니다. http://jsfiddle.net/JZsLt/2/

Answer 1

아약스 호출은 비동기식입니다. 따라서 플러그인은 비동기 적입니다. 플러그인이 ajax 호출이 반환 될 때까지 jQuery 객체에 새 요소를 추가 할 수있는 방법은 없습니다. 또한, 원래 jQuery 객체에 추가 할 수 없다는 것을 알았다면 새 jQuery 객체 만 만들 수 있습니다.

플러그인이 두 번째 매개 변수로 콜백 함수를 사용하도록 할 수 있습니다. 콜백은 원래 요소와 새로 삽입 된 요소를 포함하는 jQuery 객체를 전달할 수 있습니다. '

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

그러나 entries가 아약스 호출이 반환 될 때까지 변경되지 않습니다, 그래서 돈 : 당신이 할 수있는, 물론

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

:

$.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; 
}; 

그런 다음 당신은 부를 수 그것에서 많은 가치를 보지 마라.

플러그인 내부에있는 this은 jQuery 객체를 참조하므로 $(this)에 전화 할 필요가 없습니다.