Question

我在名为“calgrid”的页面上有一个容器DIV，我使用AJAX填充日历样式的网格。这允许我每60秒从数据库更新日历元素。显示效果很好，更新也很完美。这是我的问题。

当我第一次加载页面时，我使用数据库调用在本地填充网格，以获取页面上的内容。那时，我可以使用javascript访问网格中的元素，并执行诸如带颜色等的高亮框之类的操作。

function findLocation(id,span,color) {
$("#"+id).css('width',(27*span)+'px');
$("#"+id).css('background-color',color);
}

这适用于初始页面加载。

但是，一旦使用jquery“load”ajax调用重新加载该容器DIV的内容，

function setAjaxReload() {
if($('#override').attr('value') == 'yes') return;
$('#messages').css('background-color','#ffff00');
$('#messages').html('Contacting FileMaker');
$('#messages').css('visibility','visible');
$('#hopper').load('ajaxgrids.php','timebits=<?php echo $timebits; ?>&jobfilter=<?php echo $jobfilter; ?>&deptfilter=<?php echo $deptfilter; ?>&profile=<?php echo $profile; ?>&month=<?php echo $month; ?>&day=<?php echo $day; ?>&year=<?php echo $year; ?>',function() {
    $('#messages').css('background-color','#00ff00');
    $('#messages').html('Updating Schedule');
    var blob = $('#hopper').html().split('^');
    $('#details').html(blob[0]);
    $('#wogrid').html(blob[1]);
    $('#calgrid').html(blob[2]);
    setTimeout(function() {
    $('#messages').css('visibility','hidden');
    }, 1000);
}
);
}

任何按ID访问容器DIV中元素的尝试现在都会失败。例如，如果我尝试将元素设置为蓝色，则javascript会执行，但单元格不会转动。

这是奇怪的部分。如果我向该javascript添加alarts并首先询问单元格的当前宽度和父ID是什么，它返回的答案是针对页面加载期间创建的原始元素的状态，而不是在jquery加载期间替换它的元素。

function findLocation(id,span,color) {
alert($("#"+id).css('width'));

$("#"+id).css('width',(27*span)+'px');
$("#"+id).css('background-color',color);

alert($("#"+id).parent().attr('id'));
}

就好像容器DIV的原始内容仍然存在于某个地方，并且刚刚添加了新内容，而不是替换它。即使我在加载之前使用$（'#calgrid）.html（“”）来确保我杀了它也是如此。

如果我注释掉更新calgrid并仍然更新页面上其他容器的加载操作部分，那么calgrid在页面上完全是空白的，就像您期望的那样。但是，即使没有内容，javascript仍然可以访问那些被删除的元素的属性，就好像它们仍然在某个地方的DOM中一样。

我检查了DOM，并且容器DIV的子容器没有重复版本。我知道每次通过AJAX替换它们时我怎么能完全杀死旧元素？

使用$（＃aDIV）.html（“”）删除元素内容时，不会删除DOM元素引用

0 个答案: