jquery에서 DOM 요소를 올바르게 캐시하는 방법은 무엇입니까?

Question

네임 스페이스 변수에서 캐시 된 DOM 요소에 액세스하는 데 문제가 있습니다. 내 FeedManager의 구성 변수는 다음과 같이이다 : 여기에 $ feedContainer

var FeedManager = { 
    config : { 
     $feedContainer : $('#feedContainer'), 
     feedUrl : 'http://rss......', 
     feedLimit : 10 
    },.... 

는 HTML의 UL 요소입니다. 피드에서 빌드 한 li 요소를 추가하고 싶습니다. FeedManager 객체 안에 funciton init()이 있습니다. 하지만 어떻게 든 자식 요소를 추가 할 수 없습니다.

init: function(){ 
      var feed = new google.feeds.Feed(FeedManager.config.feedUrl); 
       ...... 
       ...... 
       // this is not working 
       FeedManager.config.$feedContainer.append(li); 

하지만 init() 함수 내부에서 다시 feedContainer 요소를 얻으면 작동합니다!

var feedContainer = $('#feedContainer'); 
feedContainer.append(li); 

무엇이 문제 일 수 있나요? 어떻게 내 config 개체에 initialzied 캐시 된 DOM 요소를 사용할 수 있습니다.

Answer 1

안에 당신은 $('#feedContainer')가 이미로드되어 있는지 확인해야 할 것입니다.

것과 유사한 예 :

<script type="text/javascript"> 
$(function() { 
var Manager = { 
    config: { 
     $p: $("p#hello") 
    }, 
    init: function() { 
     var label = Manager.config.$p.html(); 
     console.log(label); 
    } 
}; 
Manager.init(); 
}); 
</script> 

Answer 2

#feedContainer 요소가 HTML에 있습니까? 아니면 나중에 가져 오나요? 당신이 요소를 캐시 할 수있는 것보다 나중에 인출하는 경우, 당신은 feedContainer 같은 단지 선택 문자열을 사용해야 할 것 : 당신의 FeedManager 객체에

를 '#의 feedContainer'` 다음

$(FeedManager.config.feedContainer).append(li); 

같은 것을 사용

HTML에있는 경우 DOM 준비가 완료된 후 FeedManager 객체를 정의해야합니다.

$(document).ready(function() { 
    // ... 
}); 

또는 $(function() { ... });