1
클릭했을 때 데이터 (작업 설명)를 표시해야하는 옵션 목록 (작업 카테고리)이있는 페이지를 구현했습니다. 나는 BBQ를 사용하여 뒤쪽 스택을 처리하고 있습니다.
모든 기능은 멋지게 작동하지만 사용자가 처음으로 페이지를 탐색 할 때 초기 선택을 설정하는 경우는 예외입니다. 내 코드는 오른쪽 요소에 addClass('selected')으로 호출되고 있지만 코드가 실행될 때 실제로 사용할 수없는 요소와 같습니다.
디버그 호출 $('#category' + C).append('bite me');을 추가하여 스타일 시트/CSS에 문제가 없다는 것을 알았습니다.
<script>
function historyCallback(e) {
var C = $.bbq.getState("category");
if (C != undefined && C != 0) {
// We've been navigated back to
$('#Descriptions').empty();
$.getJSON('/Jobs/GetJobDescriptions?' + 'JobCategory=' + C, function(descs) {
$.each(descs, function(index, description) {
$('#Descriptions').append('<h3><a href="/Jobs/ShowJob?JobID=' + description.ID + '">' + description.JobTitle + '</a></h3>');
$('#Descriptions').append('<p>' + description.JobSummary + '</p>');
$('#Descriptions').append('<p><a href="/Jobs/ShowJob?JobID=' + description.ID + '">Read more...</a></p>');
});
});
$('a.jobcat').removeClass('selected');
$('#category' + C).addClass('selected');
$('#category' + C).append('bite me');
}
else { // category not specified so reset the page
$.bbq.pushState({ category: 3 },2);
}
}
function loadCategories() {
$.getJSON('/Jobs/GetCategories', function(data) {
var categories = data;
$.each(categories, function(index, category) {
addCategory(category.ID, category.CategoryName);
});
});
}
function addCategory(CatID, Name) {
$('#Categories').append('<p><a class="jobcat" id="category' + CatID + '">' + Name + '</a></p>');
$('#category' + CatID).click(function(event) {
$.bbq.pushState({ category: CatID }, 2); // merge_mode=2 means wipe out
});
}
$(document).ready(function() {
$(window).bind("hashchange", historyCallback); // needed for bbq plugin to work
loadCategories();
historyCallback();
});
</script>
$(document).ready에서 직접 호출 historyCallback를 통해 처음으로, C이 정의되지 따라서 else 문이 내 기본 범주 인 category=3에 #has을 설정 $.bbq.pushState({ category: 3 },2);을 실행합니다
여기 내 코드입니다.
이로 인해 C == 3을 사용하여 historyCallback을 다시 호출합니다. 이 라인은 내가 카테고리를 클릭 할 때 예상대로 작동 마십시오
$('a.jobcat').removeClass('selected');
$('#category' + C).addClass('selected');
$('#category' + C).append('bite me');
참고 : if 조항의 끝에있는 세 줄은 영향을주지 않습니다.
loadCategories()에서 생성 된 #category 앵커가이 코드가 실행될 때 jQuery/DOM/whatever에서 아직 사용할 수 없습니다.
지연 광석이 필요합니까? 내가 뭘 놓치고 있니?
감사합니다.
우승자! '.getJSON'이 비동기 델리게이트를 생성한다는 것을 잊었습니다. 'historyCallback'에 대한 호출을'loadCategories'에있는'$ .each {}'문장 바로 다음으로 이동하면 그것을 고칠 수 있습니다. 나는 당신을 사랑한다 StackExchange! – tig
확실히 확실하지는 않지만 확실합니다. AJAX의 콜백은'historyCallback' 호출 전에 결코 실행되지 않습니다. – Guffa