JQuery 탭 함수는 JQuery 템플릿을 통해 실행되지 않습니다.

Question

안녕하세요 검색 결과에 따라 잠재적으로 자체 탭이 각 행에 내 서버에서 검색 결과를 반환하는 JQuery 탭 http://jqueryui.com/demos/tabs/ 사용하고 있습니다. 사용자가 정렬 옵션을 클릭하면 탭이 있거나 없을 수도있는 반환 된 각 행의 탭을 포함하여 검색 결과가 변경됩니다. 위의 예에서 반환 된 2 개의 레코드가 있고 최상위 레코드에는 기타 비디오라는 탭이 있음을 볼 수 있습니다.

성공적으로 서버에서 결과 집합을 검색 할 수 있고 서식 파일을 올바르게 bulding 있습니다. 그러나 .tabs() 함수를 실행할 수 없습니다? 누구든지 탭을 사용하여 어떤 경험을 가지고 있고 어떻게 내 tab() 함수를 실행시킬 수 있는지 알고 있습니까?

json 결과 집합이 반환 된 후 템플릿을 동적으로로드하는 데 사용하는 코드는 다음과 같습니다.

 
$(".searchBox").fadeOut("fast", function() { 
    $(this).html("").fadeIn("fast", function() { 
     $("#searchTemplate").tmpl(json.Data.SearchResults.Results).appendTo(".searchBox").fadeIn("fast"); 
    }); 
}); 

여기 템플릿로드 후 결과를 반복하는 데 사용하는 for 루프가 있습니다.

for(var i=0;i<json.Data.SearchResults.Results.length;i++) for(var i=0;i<json.Data.SearchResults.Results.length;i++)

xxxx

"존재하고 있습니다." 템플릿이 생성되지만 탭 자체는 문에 의해 초기화되지 않습니다.

$(document).find("div[id='tabs"+json.Data.SearchResults.Results[i].Counter+"']").tabs();

아무도 이유가 무엇인지, 또는 여기에서 필자가 .tabs() 함수를 실행하기 위해 누락 된 이유를 알고 있습니까? .

나는 동적 내용을 조사하고 방화 광 관리자를 사용하여 html 코드를 두 번 확인했는데 모든 것이 올바른지, # id가 거기에 있는지 등등에 따라 다르므로 내 유일한 결론은 .ta bs() 함수가 실행되지 않습니다. 이것은 JQuery 탭 자체에 대한 제한 사항입니까? 이 유형의 "라이브"로드 기능을 수행 할 수 있습니까? 템플릿 자체를로드 할 때 콜백 함수를 사용해야합니까?

다음은 탭이 작동하지 않고 서버를 호출 한 후 반환되는 내용입니다.

Answer 1

좋아 비슷한 문제를 겪고있는 당신의

(가) 전화 tmpl 나는이 같은 콜백 함수의 내부 루프 내를 배치해야 예 :

나는 코드 블록 후 루프 탭() 함수에 대해 기본적으로 참조되지 않은했다

 
$(".searchBox").fadeOut("fast", function() { 
    $(this).html("").fadeIn("fast", function() { 
     $("#searchTemplate").tmpl(json.Data.SearchResults.Results).appendTo(".searchBox").fadeIn("fast"); 

     // For loop should go here! 

    }); 
}); 

새로 생성 된 탭