[英]Can't change elements added during $(document).ready during $(document).ready
我实现了一个页面,其中包含选项(职位类别)列表,单击该选项后应显示数据(职位描述)。 我正在使用烧烤来处理后筹码。
除了在用户首次导航到页面时设置初始选择外,一切都很有效。 我的代码被调用将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>
第一次通过historyCallback
,直接从$(document).ready
调用, C
是未定义的,因此else
语句执行$.bbq.pushState({ category: 3 },2);
它将#has设置为category=3
,这是我的默认类别。
这会导致再次调用historyCallback
,这次使用C == 3
。 if
子句末尾的三行无效:
$('a.jobcat').removeClass('selected');
$('#category' + C).addClass('selected');
$('#category' + C).append('bite me');
请注意,当我单击某个类别时,这些行会按预期工作。
看起来在loadCategories()
中创建的#category
锚在此代码运行loadCategories()
不适用于jQuery / DOM /。
我需要某种延迟矿石吗? 我想念什么?
万分感谢。
因为getJSON函数异步运行,所以它不可用。 json数据从服务器到达后发生getJSON回调。
不要使用延迟。 什么可能会更好:
在我看来,问题出在时间上-您不能保证已创建元素,因为它们取决于是否已加载JSON和相关功能是否已执行。 您的代码几乎肯定会在执行addCategory()之前调用historyCallback()。 不过,我对烧烤并不熟悉。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.