据我所知,当通过AJAX加载DOM内容时,jQuery不会运行。但我对其原因感到困惑。我的理解是,在jQuery启动时DOM元素并不存在,因此它无法找到正确的ID或类。
但是我的情况是,只有在通过AJAX加载所有内容后才会调用jQuery。但它仍然无效。
这是我的代码。我试图让函数decorateGains()
在AJAX完成后运行。
loadData('7-days'); // Runs the default AJAX for 7 days
function loadData(type){
var xmlhttp;
if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("home-table").innerHTML=xmlhttp.responseText;}
}
xmlhttp.open("GET","actions/get-data-"+type+".php",true);
xmlhttp.send();
decorateGains();
}
您可以看到我在decorateGains()
函数末尾包含对函数loadData()
的调用。
decorateGains()
函数执行运行,因为我可以看到我的控制台消息。但是,它没有完成它应该完成的任务。
function decorateGains() {
console.log('here');
$(".gains").each(function() {
var num = +($(this).text());
if (num > 0) {
console.log('here');
$(this).addClass("positive");
}
if (num < 0) {
console.log('here');
$(this).addClass("negative");
}
});
}
(该脚本会搜索类.gains
的所有元素,并根据元素的内容添加新的positive
或negative
类。基本上它会修饰{{ 1}}元素为红色或绿色,具体取决于数字是负数还是正数。
答案 0 :(得分:2)
这是因为AJAX调用是异步的。当您调用decorateGains()
函数时,请求尚未完成(因此新内容未附加到DOM)。在设置onreadystatechange
之后,您需要在innerHTML
处理程序中调用该函数:
loadData('7-days'); // Runs the default AJAX for 7 days
function loadData(type) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("home-table").innerHTML = xmlhttp.responseText;
decorateGains(); // <-- move this in here
}
}
xmlhttp.open("GET", "actions/get-data-" + type + ".php", true);
xmlhttp.send();
}